I added to to the iframe a class with css

width:100%;
height:auto;

but does not work for the height.

Any ideas better than jquery dirty fix

$(window).resize(function(){
    var tempwidth=$(".vimeoiframe").width();
    var tempheight=tempwidth/1.25;
    $(".vimeoiframe").css("height",tempheight);
});

Since not all my videos have this aspect ratio.

I added to to the iframe a class with css

width:100%;
height:auto;

but does not work for the height.

Any ideas better than jquery dirty fix

$(window).resize(function(){
    var tempwidth=$(".vimeoiframe").width();
    var tempheight=tempwidth/1.25;
    $(".vimeoiframe").css("height",tempheight);
});

Since not all my videos have this aspect ratio.

• javascript
• jquery
• html
• css

• Your jQuery dirty fixed worked pretty damn well for me if I may say so. Way better than having to use a plugin to do such a simple thing. – Lee Commented Mar 27, 2014 at 14:28
• @lee I also use it rather than plugins when I know all videos will have same aspect ratio. – Daniel Commented Mar 27, 2014 at 19:00

2 Answers 2

You should take a look at this jQuery plugin, seams that was wrote for you

FitVids.js

There is an entire article about it on CSS Tricks as well

Fluid Width YouTube Videos

And his magazine article

Create fluid width videos

Or you could use percentage ratios, http://codepen.io/maxmckenzie/pen/hFzak the video dose not load in codepen for some reason.