Hello,

I'm trying to embed a fluid video that would auto-fit the screen, I tried a lot of tricks but to no avail.

Please help me!

http://www.socialbunny.co/stadio

Thank you!

You need to put the video in a wapping element. Then you can set that elements height to zero, and padding bottom to a percentage value. Doing this will make that elements height be a percentage of it's width. You play around with this percentage to match the aspect ratio of the video, normally the value would be around 56%.

Then you absolutely position the iframe inside this wrapper and force it's dimensions to match.

<div class="video-wrap">
  <iframe>...</iframe>
</div>

.video-wrap {
  position: relative;
  height: 0;
  padding-bottom: 56%;
}
.video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

If you cannot manually put the wrapper around the iframe you can handle it with some JavaScript:

I wrote this jQuery snippet to handle this exact problem a few months ago:

(function($) {
    function makeResponsive(){
        $(this).wrap('<div class="video-wrap"></div>');
    }
    $('iframe[src*="vimeo.com"]').each(function() {
        makeResponsive.call(this);
    });
    $('iframe[src*="youtube.com"]').each(function() {
        makeResponsive.call(this);
    });
}(jQuery));

Edited November 5, 201411 yr by rbrtsmith

Only thing to add to what rbrtsmith said is that the padding should be 56.25% for 16:9 videos (9 / 16 = 0.5625, x 100 = 56.25) and 75% for 4:3 videos (3 / 4 = 0.75, x 100 = 75) although 16:9 is the most common aspect ratio online.

http://webdesignerwall.com/tutorials/css-elastic-videos is another version of the same, only requires CSS.

http://webdesignerwall.com/tutorials/css-elastic-videos is another version of the same, only requires CSS.

 

That's pretty much exactly the same as the css I posted earlier. The js is only required when you're using a cms and you want clients to be able to add a video to the body of the post, as the iframe will not get the required wrapper. The js merely adds this wrapper if this situation were to arise.

Edited November 7, 201411 yr by rbrtsmith