Integrating Responsive Video Into Your Web Designs

Responsive web design has become the norm as modern applications and websites are expected to adapt and fit into different screen sizes. It provides an optimal viewing experience to users, irrespective of the device, window size, orientation, or resolution. Content, images and videos should be fluid enough to accommodate different viewports. Websites can be viewed on a range of devices. The list of devices users employ in watching videos on your platform is endless: phones, laptops, and iPads, to name a few. Ultimately, you have no influence on how people are going to view your videos or your websites. Sure, you can restrict users to a certain device, browser or orientation(landscape or portrait). But do that, and you’ll easily lose your audience. You might be familiar with the concept of responsive images and art direction. These concepts provide developers with the power to make images scale responsively in a way that prevents distortion and enables delivery of specific content across various devices, resolutions, viewports and orientations. If you are new to this concept, check out the excellent article written by Eric Portis on responsive images in practice. Having this knowledge about responsive images means you already possess the arsenal to properly design your websites with the proper specifications to meet visitors’ expectations. But, what about videos? Are your videos responsive, too? Don’t let your users’ choice of devices take you by surprise. Be the Samuel L. Jackson of every situation, especially with regard to the responsiveness of your videos. Let’s dive in! How many of you have embedded YouTube or Vimeo videos on your site? I’m guessing everyone, well… almost everyone. By default, you might expect that these embedded videos would be responsive, but are they really?

Video Embed Case Study

Take a sample YouTube video, for example https://www.youtube.com/watch?v=y5-hH8DnqMk. Grab the embed code from the page, and insert into an html page like so:

< !DOCTYPE html>
    


    

Result: Not responsive! How do we make this embedded video responsive? In our example here, we used YouTube. But it could be from any other video hosting platform, such as Vimeo.

Responsive Solutions

There are a couple of ways to make your videos responsive on your websites. Let’s take a look at the available CSS and JavaScript tricks for crafting responsive videos.

FitVids.js

This is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. It was developed by Chris Coyier and Paravel. This plugin automates the intrinsic ratio method by Thierry Koblentz to achieve fluid width videos. It wraps each video in a div.fluid-width-video-wrapper and applies the necessary CSS. After the first JavaScript call, the CSS takes over and performs the responsiveness. Let’s attempt to make our video embed case study responsive with this proposed solution. Codepen solution here: https://codepen.io/team/Cloudinary/pen/aWNpjE Let’s take another look at Pure CSS solutions for making videos responsive.

Fluidvids.js

Fluidvids.js was developed by Todd Motto. It targets the iframe, checks for the source of the video and also applies the intrinsic ratio method to perform an aspect ratio calculation. The advantage of this script is that it doesn’t depend on any third-party plugin, library or script. With minimal scripting, it enables faster rendering and enhanced performance. Let’s attempt to make our video embed case study responsive with this proposed solution. Codepen solution here: https://codepen.io/team/Cloudinary/pen/Wjwpwo

ZURB Foundation

The ZURB Foundation came up with a CSS solution that is incredibly simple to use. With flex-video, you can automatically create an intrinsic ratio that will properly scale your video on any device. It requires you to use the Foundation framework. Let’s attempt to make our video embed case study responsive with this proposed solution. Codepen solution here: https://codepen.io/team/Cloudinary/pen/gWrmLp

Bare Bone CSS

We don’t want to involve any CSS framework. How do we make it responsive using vanilla CSS? We want to make the video responsive without any magical solution. Huge thanks to Thierry Koblentz for coming up with this technique. He came up with the idea of using intrinsic ratios for video. With intrinsic dimensions, a new width triggers a new height calculation, allowing videos to resize and giving them the ability to scale the same way images do. Many of the other CSS framework and plugin solutions use this technique under the hood to implement video responsiveness in web design. The first thing we need to do is wrap the embedded video in a div and give it a class like so: Now that we have wrapped the iframe within a div container, we need to give the child elements of the video-wrapper (the iframe, object and embed) a width and height of 100% so that they expand to the full width of the wrapper, like so:

.video-wrapper iframe,  
.video-wrapper object,  
.video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Now, let’s add style to the video-wrapper class like so:

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

Note: The padding-bottom property is actually very key in making this technique work depending on the ratio of height-to-wdith of your video. 56.25 percent is for a 16:9 ratio, 74.25 percent is for a 4:3 ratio and 50 percent is for a 16:10 ratio! Codepen solution here: https://codepen.io/team/Cloudinary/pen/XRdMRY A similar implementation can be found on this post at nosecreek’s blog.

HTML5 Video Case Study

Apart from using the video embed codes that are loaded using an iframe, you can also use the well-known HTML5 video element. How do you make your videos responsive in this case? Fortunately for developers, it’s quite easy. You simply style it by setting the max-width to 100 percent and the height to auto. This is exactly how it works for responsive images too. Let’s check that out. Codepen solution here: https://codepen.io/team/Cloudinary/pen/qmZrXv

Enter Cloudinary

Using Cloudinary, you can resize and crop videos in order to match the design of your website. Whether videos are uploaded in your server-side code or by your users, the originals are stored in the cloud. You can then dynamically create multiple resized, cropped and manipulated videos on-the-fly and deliver them via dynamic URLs, or use code to either add video tags or build video URLs. Cloudinary enables you to change the size of a video with the width and height parameters, represented as w and h in URLs. Programmatically getting the width and height from the browser’s viewport and passing it to the url can automatically make your videos responsive as the user shuffles between different device sizes and resolutions. For example, you can resize an uploaded video to a certain width and height like so: [video width="250" height="150" mp4="https://www.noupe.com/wp-content/uploads/2017/04/dog.mp4"][/video] You also can change the height while maintaining the aspect ratio like so: [video width="444" height="250" mp4="https://www.noupe.com/wp-content/uploads/2017/04/dog-aspect-ratio.mp4"][/video]

c_fit

While retaining the original aspect ratio, you can change a video size to fit into a given width and height. For example, this video below is fitted to a width and height of 150 pixels while retaining the aspect ratio using c_fit. [video width="250" height="140" mp4="https://www.noupe.com/wp-content/uploads/2017/04/dog-250.mp4"][/video]

Conclusion

We have highlighted different solutions you can use to achieve responsive videos depending on your use case and web project. Your users should be able to access your content from virtually any type of device, browser and operating system. But it’s not just about access alone, videos also should be beautifully rendered. Responsive video helps you achieve that goal as well. For more information, or to sign up for an account and test these features, visit the Cloudinary website. (Disclaimer: This post is sponsored by Cloudinary.)