Make HTML5 or Youtube Embed Video Fully Responsive

Do you ever try to make HTML5 or YouTube embed video fully responsive? If not yet. Then, here I’m going to make embed video responsive using CSS.  Basically, when you add a video on your website using HTM5 <video> tag, It will not get in proper size on mobile devices. To make it resize on mobile (Responsive), We need to play with CSS.

To make an HTML5 video responsive is a little more complex than an image. We can’t just make it mobile-friendly by just adding max-width:100%

There are few other things that need to tackle to make it work well on small devices.

To scale the Iframe embed or HTML5 video, Both need a different technique to handle their responsiveness. But don’t worry, In this article, I will cover both.

If you want to make video work on fullscreen then you can check out our previous article about fullscreen video background which uses the same technique but with modification to make it work in fullscreen mode.

There are many ways to add a video to a website. You might be self-web hosting the video and offering it through the HTML5 video tag.

How to Make Embed or HTML5 Video Responsive

You are probably the use of youtube or Vimeo which affords iframe code to show video or the usage of viddler.com or blip.tv which offer nested item/embed tags to show a flash participant.

In each of those scenarios, It is very commonplace for a static width and top to be declared.

<video width="500" height="400" controls></video>
<iframe width="500" height="400" src="#"></iframe>
<object width="500" height="400" data="video.swf"></object>

Defining static widths is not a great idea in fluid width environments. What if the determined container for that video shrinks narrower than the declared 500px?

It’s going to bust out and probable appearance ridiculous and embarrassing. So you simply need to define 100% width.

<video width="100%" height="400" controls></video>

By doing this, the video will fit the width of the box but what about the height? It is vital that you take away the height.

In order that the aspect ratio of the video is maintained because it grows and shrinks. Lest you get awkward to fill the empty area (not like images, the actual video maintains it’s aspect ratio irrespective of the size of the element).

To handle this, We will get through CSS and now not worry about what is declared within the HTML5 video tag.

Let’s have a look at the CSS.

video {
  max-width: 100%;
  /* Force Correct Aspect Ratio */
  height: auto !important;
}

Also, you could also use max-height:100% to ensure that you don’t get any vertical scroll. With this method, the HTML5 video scale to fit div and element has the maximum width and height will always be used without any scrolling.

video
{
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

However, If you want to use video directly on your website then it is a pretty much bad idea. Because it has the following drawbacks.

• 1) Hosting video is bandwidth-intensive and much expensive.
• 2) Streaming is another whole complicated and it consumes bandwidth.
• 3) Maintaining appropriate quality across formats.
• 4) Skinning consistent controls on the player are hard.

1. Responsive video with Media Query

If you know about the responsive design and you probably hear about responsive media queries and chances are you’ve used them yourself.

For those who haven’t know about it, media queries allow us to define specific CSS rules for different output devices such as the iPhone, iPad, etc without changing the actual content. (For more information you can visit CSS media queries.)

I am not sure how many peoples know that you guys can easily apply media queries to the source element when providing different source files for your embedded video and audio.

By adding a valid media query to a video source, we need to specify the following particular source that should use when a device matches the media query.

<video controls> 
  <source src="trailer-small.mp4" type="video/mp4" media="all and (max-width:480px)"> 
  <source src="trailer-small.webm" type="video/webm" media="all and (max-width:480px)"> 
  <source src="trailer.mp4" type="video/mp4"> 
  <source src="trailer.webm" type="video/webm"> 
</video>

In the above example, you can see file trailer-small.mp4/webm will only load for devices that have a max-width of 480 pixels. Otherwise, the trailer.mp4/webm file will be loaded.

2. Make Embed Youtube Video Responsive

Instead of using an HTML5 video, I highly recommend using an embed video like YouTube or Dailymotion to make them fully responsive. By using these, the drawbacks mentioned above will get out. When you embed videos from these services, you embed an iframe.

But our little a 100% width trick isn’t going to assist you while copying the video that is added through an iframe. Setting a height is needed, otherwise, browsers will render the iframe at a static height of 400px, that’s ways too squat for maximum video and makes for greater ridiculous and embarrassing.

Luckily there is more than one possible answer here. certainly, one of them was pioneered through Thierry Koblenz and presented on a list aside in 2009: Developing intrinsic ratios for video.

With this approach, you wrap the video in another detail which has an intrinsic factor ratio, then positioning absolute the video within that. This gives us fluid width with an inexpensive top we can count on.

<div class="videoResponsive">
  <iframe width="560" height="349" src="https://www.youtube.com/watch?v=VPN8PRZ_YsI" frameborder="0" allowfullscreen></iframe>
</div>

You need to add some CSS for an iframe, object or embed and you require setting absolute position. By doing this, it gives you the ability to maintain aspect ratio. Again remember that we are targeting the iframe/object/embed, not video element.

Here is a responsive video CSS example:

.videoResponsive {
	padding-bottom:56.25%;
  height:0;
  position:relative;
	padding-top:30px;
	overflow:hidden;
}
.videoResponsive iframe, 
.videoResponsive object, 
.videoResponsive embed {
	position:absolute;
	left:0;
  top:0;
	width:100%;
	height:100%;
}

Drawbacks

The above approach is remarkable, however, it has several feasible obstacles:

• It needs an extra wrapper element, so just immediately copy and paste the code from youtube is out.
• If you have legacy content and are redesigning to be fluid, all old videos require HTML changes.
• All videos should have the same aspect ratio. Otherwise, they’ll be displayed at different aspect ratios. You need to define multiple classes for each video to adjust it which is another complication.

3. Responsive with the Help of jQuery

if either of those limitations practices to you, you might do not forget a javascript solution. We have a solution from Chris Coyle who has written Javascript code for this problem.

Believe this: while the page hundreds of all videos are checked out and their component ratio is stored. As soon as proper away, and each time the window is resized, all of the videos are resized to fill the width and keep their component ratio. The usage of the Jquery and javascript library, that seems like this:

// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),

  // The element that is fluid width
  $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
  .data('aspectRatio', this.height / this.width)

  // and remove the hard coded width/height
  .removeAttr('height')
  .removeAttr('width');

});
// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

  var $el = $(this);
  $el
  .width(newWidth)
  .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

Let’s see what he did in the javascript function to handle the aspect radio of Vimeo video. As we know Vimeo uses iframes, so what works for Youtube will work for Vimeo and Dailymotion. You don’t require any HTML or CSS at all, and the jquery solution will provide you a solution by changing a single line:

var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com'], iframe[src^='//www.dailymotion.com']"),

That’s it. I recommend Youtube embed video method because it will not hurt your server load and nor bandwidth, especially if your video files are quite large.

I hope you like this article and find it useful to you. Let me know if you are able to make HTML5 or YouTube embed video fully responsive. Please support us by sharing this article on social media.