javascript - Dynamic resize of Vimeo Video (or Youtube) - Stack Overflow

admin管理员组

文章数量:1351978

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

Share Improve this question Follow asked May 7, 2012 at 18:56 DanielDaniel 1,12422 gold badges1313 silver badges3131 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

本文标签： javascriptDynamic resize of Vimeo Video (or Youtube)Stack Overflow