davatron5000 / fitvids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

fitvids.js's Issues

Usine inline height and width for aspect ratio when available

Right now FitVids calculates the aspect ratio based on $this.width() and $this.height(), but in cases where the video's inline width extends beyond the container area, the aspect ratio calculation is screwed up because $this.width() gets capped at the width of the container, while the height is not limited.

An example of the issue can be seen here: http://jsfiddle.net/kA9JN/

A fixed version (included in the pull request) is here: http://jsfiddle.net/wF3AM/1/

IE Whitespace

Great script. It works fine in everything else except IE, where I get whitespace. Please advise: http://www.ag.ncat.edu/solutions2012/forsyth.html

Skips YouTube videos that use https

If serving up a video embed using https, the script will bypass it because it only looks for "http".

IE7 and object tag

This doesnt work in ie7. (it works in ie89 and good browsers.)

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="437" height="288" id="viddler"> <param name="movie" value="//vimeo.com/18908510/"> <param name="allowScriptAccess" value="always" /> <param name="allowFullScreen" value="true" /> <param name="flashvars" value="fake=1"/> <embed src="//vimeo.com/18908510" width="437" height="288" type="application/x-shockwave-flash" allowScriptAccess="always" allowFullScreen="true" flashvars="fake=1" name="viddler" ></embed> </object>

But this does.
<iframe src="http://player.vimeo.com/video/18908510" width="800" height="450" frameborder="0"></iframe>

In the first example (with object) the video is to heigh. Doesnt crop.

Dynamic videos and FitVids

My website loads iframes dynamically, and when I run FitVids after an iframe has downloaded, I end up with a FitVids container in another FitVids container etc. with the video contained in the last FitVids container on the iframes that have already downloaded. Is it possible to fix this behaviour as it causes excess padding above the video? Thanks.

Problem with black bars

Hi!

I'm working on a site right now where I have a bunch of vimeo videos.
The problem I ran into now is that they don't have the same aspect ratio all of them, so I decided to remove the WIDTH and HEIGHT parameters from the iframe and let the FitVids script do the fitting instread.

The problem now is that I get black bars on both videos, and I rather not have them if it's possible.

Please have a look at my demo here:
http://persturesson.com/fitvid/

Ideas?

FitMaps

Hello,

Thanks for sharing your plugin. I also needed 'responsive' Google maps embeds for a Sencha Touch 2 web app, so I took your excellent plugin and changed it to work with Google maps embed code.

Link to demo: http://c9.io/hermanvandermaas/fitmaps/workspace/index.html
Link to code: http://c9.io/hermanvandermaas/fitmaps

If you like it please put it on github.
My e-mail address is herman at waywayway dot nl.

FitVids how working with VideoJS?

Hi,
is there anybody who know how FitVids.js work with VideoJS?
I don´t get it work with it.

Best regrads

Boooo Viddler

So getting the $("object").height() on the viddler embed returns "28" (WTF). But you can do .attr("height") and it returns properly. Should we do like a if tagName == 'OBJECT' or whatever and use attr instead?

Minimum jQuery version

What's the minimum jQuery version needed to run fitvids?

Invalid HTML for .wrap()

Hi,

Just a quick report from me. jQuery requires HTML fragments passed to jQuery(), $.fn.html or $.fn.append to be well-formed, .wrap() is no different.

Problem line:

$this.wrap('<div class="fluid-width-video-wrapper" />') // [...]

These fragments are created using innerHTML which does not allow shorthand[1] syntax (DIV is not a self-closing element). Modern browsers ignore it and silently fix it, however most versions of Internet Explorer do not, hence it currently fails in some cases.

• Documentation: http://api.jquery.com/jQuery/#creating-new-elements
• Summary: When creating stuff by just it's tag, $('<div />' ) and $('<span>') shortcuts are fine. When creating anything more complex it has to be either a valid well-formed string of HTML like wrap('<div class="fluid-width-video-wrapper"></div>') or use something like $('<div />', { 'class': 'fluid-width-video-wrapper' } ) or $('<div>').addClass('fluid-width-video-wrapper');

padding-top causes expanded videos

Hi,

There is an issue over at drupal.org which explains how videos can appear vertically expanded. The issue contains screenshots and has been experienced by a few people.
http://drupal.org/node/1375102

The cause of the problem appears to be the padding-top addition in line 71. Removing it makes everything work nicely.

I'm not really sure what the underlying reason was for some Drupal pages having problems. Just thought that I'd pass it on.

cheers

Murray

Height (padding value) wrong when enlarging video

My videos scale down correctly as you narrow the browser, but when you do it the other way round (starting small and widening the video container) the fluid-width-video-wrapper containers padding gets increasingly large so the video has massive black borders above and below it.

Has anyone experienced this?

Accounting for the YouTube control bar

It seems like an optimization could be made to account for the YouTube control bar. I setup a simplified test to explain what I mean. When you load the page below, there are two videos at 100% width, they both look good it terms of the poster image that shows up, but when you click to play each one you'll see the difference. The top video has controls hidden (controls=0 in the iframe url) and the bottom doesn't. The top video maintains perfect aspect ratio with no letter-boxing, but the bottom one ads letterbox bars on the sides.

http://natesteiner.com/tests/fitvids/

I don't really have the chops to fix this, but hoping there's a way to account for the bar somehow. Pardon in advance if I'm wrong about this and doing something dumb.

IE9 errors

Someone posted a comment on my blog. My IE9 test environment is totally bjorked so I can't confirm or deny.

Causes bizarre errors for me in IE9 when using youtube's iframe embeds (though it really looks like a problem with their code, not fitvids directly). Claims "Math is not defined." May have something to do with the floating point dimensions and YT's iframe resize code.

Here's a fiddle:
http://jsfiddle.net/YnFsn/

Looking into it, but you may have more insight. Works like a charm with all other browsers: brilliant stuff.

Social Cam

Hi there.

Can you have a look at #3 (comment) and let me know if there's anyway to get SocialCam working with FitVids?

Cheers,
Tim

Social Cam

Love this!

Any chance of getting it to work with http://socialcam.com/?

ie.

<iframe width="520px" height="391px" src="http://socialcam.com/videos/XRMP3Y5t/embed?utm_campaign=web&utm_source=embed" frameborder="0" allowfullscreen></iframe>

Second video plays just with sound... weird!

I have a testpage

www.ibrandity.de/testsite/new.html

with two vimeo videos using their api. code plays video 1, when finished it plays video 2. everything is working fine if i dont use fitvids.

if i do, the second video plays with sound, but i see no picture.

this issue is killing me! Ive read that there are problems when one div is invisible (the second one is, actually) but even if i dont set it to invisible, the problem remains.

Having just started coding recently, im unable to find the reason for this. Any help is very much appreciated so i can stop banging my head with the keyboard...

Videos Don't Play After Resizing

http://www.charlestonly.com/

Start the video, stop the video, scale down to mobile size then try to play the video again. It won't play.

Start the video. While it is playing, scale down to mobile size. Try to play the video again. It won't play.

The inverse is also true.

Thoughts?

Fitvids() and hidden content

Was using .fitvids() with a kind of tab-menu where some of the hidden tab content contained embeded videos. Had to make some minor changes in the script to make it work, since the Jquery funciton .width() returns 0 when the content is display:none

$allVideos.each(function(){
    var $this = $(this);
    // Mod start - using the iframes attr instead
    var height = $this.attr('height');
    var aspectRatio = height / $this.attr('width');
    // Mod end
    $this.wrap('<div class="fluid-width-video-wrapper" />').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
    $this.removeAttr('height').removeAttr('width');
});

Works within posts, breaks on home page

I'm using the latest version of Wordpress.

The plugin works fantastic within individual posts, but fails to wrap videos that appear on the home page. Any ideas?

http://www.charliepratt.com/blog

having issue with swfobject.embedSWF

i can't figure out how to make fitvids work with my script... http://jsbin.com/ezazom/3 its loading video from youtube via javascript and swfobject.embedSWF then its display via

any advise will be greatly aprieciated !

[code]
<script type="text/javascript">
$(".syc_video_box").fitVids();
$(".video").fitVids();
</script>

i use swobject

        swfobject.embedSWF(
            playerUrl + '&rel=0&border=0&fs=1&autoplay=' + (autoplay?1:0), 
            'player_object<?php echo $myid;?>', 660, 371, '9.0.0', false,
            false, params);

this is a joomla modules that display 1 video and a playlist of a maximum of 50

you can see it in use at http://www.wyzed.net

the jquery.fitvids is loaded in a nother section in case you ask !)

Using FitVids in a JavaScript Slider

Hi davatron,

Firstly, thanks for the awesome jQuery plugin. It really is a great asset to have in one's library.

We've implemented FitVids.js in addition to a featured slider, namely FlexSlider ( http://flex.madebymufffin.com/ ). Upon doing so, we noted that FitVids.js had issues retrieving the width and height information for Vimeo videos embedded with an iFrame. We modified our script to force a width and height attribute for this iframe, with the result that a black poster frame displays for the video, but no video controls display on hover of this video.

Hoping this is a known issue that can be resolved.

Thanks again for the great plugin. :)

Thanks and regards,
Matty.

FitVids.js not *always* working with jwplayer

I took the pertinent code from 'test.html' (the kickstart stuff) and put it in my page. It seemed to work okay, but when I added my content to the iframe content, it wouldn't work, meaning it would not resize. When I left the original content in and changed the iframe content (target) the frame would resize, but would then crash the shockwave plugin after it got to a certain width.

Also, as a feature bump, how about being able to resize when bringing the bottom of the window upward?

Support for kaltura

I've been trying to get fitvids to work with my kaltura player ( http://kaltura.org ) but just can't seem to get it to work.

Here is a 'temp' video embed code to test:

https://gist.github.com/2325974

I tried to paste in the embed code here, but it just doesn't work, hence the gist.

Basically I have to modify the fitvids.js script to force a fixed height, which of course breaks the entire concept of fitvids.

Is there an easy fix for this?

Problems with FitVids.js in IE

Hello, I'm trying FitVids.js and I'm pretty satisfied of it with Firefox (great work!) but when tested in IE (7 by now...maybe on 8 or up it works) I got a strange thing...
On max resolution (1360x768) the video (a swf native 350x392) appear smaller than the original (too small!) and reducing the resolution in a responsve layout it start to grow till the right dimensions. Let me say...it works in a reverse mode!! As said in Firefox it works very well...
It's a IE7 fault...or mine?
Thank you so much for help and have a nice day!
test page visible at
http://www.brelco.com/test/web%20test/resp/default.htm
Fabrizio

SlideShare support

While technically not a video, this embed code is widely used. The code is pretty ugly and looks like follows:

<div style="width:425px" id="__ss_9109114"> <strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/yiibu/letting-go-9109114" title="Letting Go" target="_blank">Letting Go</a></strong> <iframe src="http://www.slideshare.net/slideshow/embed_code/9109114" width="425" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> <div style="padding:5px 0 12px"> View more presentations from <a href="http://www.slideshare.net/yiibu" target="_blank">yiibu</a> </div> </div>

Any plans for this? I guess I could try to target the id="_ss" part with substring matching? Slideshare adds the title and more presentations links though.

Styles div inserted again on every call

If you have a dynamic page updated with AJAX and you call this function every time you add a new video, then you'll have several copies of the fit-vids-style div.

Fit Flash and Video to Width and Scale

Hello,

I have 2 DIVs with 400px.

In first one I want to display a Flash Movie.
In the second I want to display an HTML5 Video.

The problem:
I don't know the width/height of the Flash Movie or the HTML5 Video.

The objective:
To have set the Flash Movie and HTML5 Video to be 400px width and scale properly.

How can I use FitVids for this?

Note 1: Can FitVids work with SWF Object for Flash?

Note 2: This is not a responsive design.
But I think FitVids might help me solve this problem.

Thank You,
Miguel

Using swfobject

Anyone had any success using FitVid with swfobject.embedSWF ?

iframe swapping in FF3.6

Not sure this isn't a error in implementation but I noticed that in firefox 3.6 script was causing multiple iframes to load each others content, appearing to swap or duplicate. Issue persisted even when i targeted just the div enclosing the video to be resized.

Page is just 4 iframes from vimeo, bandcamp, facebook and twitter. Commented out the script on the live site but any ideas you have would be great!

http://iamnotahipster.com/

Thanks,
Andy

Fitvids not working with WordPress 3.3.2. So it would seem?

Seems not to be working with latest version of WP

Uncaught TypeError: Object [object Object] has no method 'fitVids'

Why is fitvids.js not running when the settings are placed in an external script.js file?

I'am using the HTML5Boilerplate and got all settings for plugins combined in a file called script.js. That file is loaded after jQuery and before closing the body.

I've tried to add the settings for the fitvids.js to that script.js file, but it won't work. When placed inside my HTML file right after script.js it is working.

Can't see why this is an issue to fitvids.js? Shouldn't be there no difference at all?

FitVids with swfobject

When using swfobject's recommended markup, FitVids gets applied to both the parent and the child object.

The recommended markup:

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
    <param name="movie" value="myContent.swf" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
    <!--<![endif]-->
      <p>Alternative content</p>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>

The DOM after FitVids:

<div class="fluid-width-video-wrapper" style="padding-top:55.833333333333336%;">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
    <param name="movie" value="myContent.swf" />
    <div class="fluid-width-video-wrapper" style="padding-top:55.833333333333336%;">
      <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <p>Alternative content</p>
      </object>
    </div>
  </object>
</div>

The desired DOM after FitVids:

<div class="fluid-width-video-wrapper" style="padding-top:55.833333333333336%;">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
    <param name="movie" value="myContent.swf" />
    <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
      <p>Alternative content</p>
    </object>
  </object>
</div>

Because of how object alternative content is determined, this extra wrapping is redundant.

Video breaks from container on Orientation change??

Hi,

Have a wee problem with FitVids, where the video breaks from it's container when the orientation is changed on a Smartphone.

Preview site can be viewed here - www.contrast.firstbasedesign.co.uk

It will load up fine in Portrait. But if you switch to Landscape mode, then back to portrait, the video keeps the dimensions from Landscape mode??

Hmmm

Fit vertically and horizontally

At the moment, FitVids will make videos resize fluidly according to width, but it would be great if it also resized according to height also.

Custom Player and video

Hi,

in the part where you guys say we can use a custom player, does that qualify http://videojs.com

Is so, how I can do that?

fitvids with jquery.youtubeplaylist.js

Hello

First thx a lot for your great plugin !

I tried to make it work with jquery.youtubeplaylist.js, which is a plugin that creates a youtube video playlist.

There's thumbnails and the video is within an iframe.

I first tried to call fitvids and ytplaylist separatly : playlist displays fine but is not responsive.
Then i tried this :

        $(function() {
    $("#content").fitVids();        
            $("ul.ytvideo").ytplaylist({addThumbs:true, autoPlay: false});          
        });

Same result.

Last try :

        $(function() {
            $("ul.ytvideo").ytplaylist({addThumbs:true, autoPlay: false});
    $("#content").fitVids();
        });

Only the thumbnails display, not the video.

I'm not a jQuery pro, sorry.
Thanks for your help ;-)

my project : http://divstudio.fr/emergenza/demos/jazz/video.html

Support for Joomla 2.5 + K2 + JW AllVideos

Searched the web for any instructions to implement fitvids.js in this environment but could not find anything useful. Using K2, JW AllVideos plugin and a responsive Joomlart template it would be really nice to have resizing video within the K2 item view.

Copied the script code into the index.php of my JA template and also transfered jquery.fitfids.js to my js directory. Then a YouTube video was embedded as iframe into an K2 item. The video is showing but it is not resizing.

The $ command seems to be accepted but I do get a "$("itemVideoEmbedded") is null" error. Maybe I am using the wrong container? - Tried to figure this aout with firebug but I am not an expert ... Is FitVids working with this software combination?

Would be great if someone can help me with this, thank you!

customSelector option

I have in my possession a version of FitVids which should help test and extend FitVids more rapidly.

It features a customSelector option that can allow people to support their own custom video vendors faster than we can add them (or not add them) to the core. Should solve things like issue #3. The API works something like this:

$('#thing-with-videos').fitVids({ customSelector: "iframe[src=^'http://mycoolvideosite.com']" });

I could change it the option name to vendor or something similar, but customSelector allows people to get as CSS specific as they'd like. Thoughts? Final petitions before I push this?

/cc @chriscoyier @TrentWalton

Windows 7 64 bits + Firefox 13.0.1 + Flash 11.3.300.257 + Youtube video = Fail.

OH HAI.
I'm using the following configurations :

• Windows 7 SP1 64 bits + Firefox 13.0.1 + Flash 11.3.300.257
• Windows Vista (sorry) Pro 32 bits + Firefox 13.0.1 + Flash 11.3.300.257

On the first one, the window can't be resized (so the video can't too).
It works well on the other one.

Weird thing 1 : maximazing the window resizes the video !
Weird thing 2 : the video adapts to the original window size, but resizing isn't allowed once it is loaded.

Any idea ?

Thanks !

Positioning Issue

I'm having an issue with absolute positioning. It looks like the video object inside my fluid-width-video-wrapper is being positioned absolutely, but the wrapper isn't getting any type of dimensions applied to it which is causing my video to cover the content that comes after it.

Could it be related to the fact that the page contains user generated content, and the user submitted a YouTube embed with height and width attributes on it?

I'm seeing this in Safari 5.2 and 5.1. Are there any known fixes for this?

YouTube5.safariext

I love this tool, thanks for your hard work.

I was wondering – can you expand compatbility a bit and try to “fix” YouTube videos replaced by a browser extension (like YouTube5.safariext) so that Flash-less peeps can still enjoy HTML5 video while having a blast using responsive websites?

Not working with Blip.tv...?

On the readme it says Fitvids works with Blip.tv, but look here:

http://jsbin.com/ejazuf/1/edit

Notice the video wrapper that's supposed to be placed around the video by the script is actually appearing below the video, creating a big gap between the video and the links (which should be right under the video).

Has anyone seen this bug before? I didn't investigate it too much but I also couldn't find any issues discussing blip.tv on here.

Not Responsive to container height

If the video's container shrinks to where it is smaller than the height of the video, the video does not resize.

Is this within the scope of the plugin to also support this?

wmode=transparent not accepted

Was trying to use wmode=transparent to have a z-index stay on top of a Youtube Video but FitVids cannot accept that.

Support for Wistia (video player)

Hello.

I would love to see support for the Wistia player, only I'm not sure how to test/implement. They have a quality commercial product ( wistia.com ).

If you need a source file for testing, I can provide embed code or whatever is needed.

The embed code on this post's video might work: http://wistia.com/blog/we-got-a-new-fridge/

Thanks!

iFrame Embed Swapping/Duplicating

Recently we started noticing an issue with FitVids where it will cause all the iFrame embeds on the page to swap out for one of the random embeds duplicating the video across the page. In testing we can reproduce this 100% of the time in the latest versions of Chrome (16.0.912.77) and Safari (5.1.2). Oddly Firefox 6 & 8 do not have the issue, but Firefox 3.6 behaves the same way.

jsFiddle - http://jsfiddle.net/nAXXY/5/
Five embeds (Vimeo and Youtube), simple CSS, jQuery 1.7.1 and latest FitVids.js

Steps to reproduce:

1. Load up http://jsfiddle.net/nAXXY/5/
2. Click on any link taking you to a new page or type in a new URL
3. Hit back on your browser
4. Refreshing the page will correct the issue

Video demo - http://cloud.jonathanmoore.com/Ddsv

Maximum width

It would be helpful to add support for maximum width (i.e. specify a max width beyond which video should not be fluid, this helps prevent videos from getting too big).

I have tried to do this myself, but without success. I'm sure there's a way to do this, but not being a JavaScript Ninja could not work out where to make the changes.

For other looking at this - a work around which does work is, of course, to place the iframe is <p> / <div> and add a max-width css statement to that. However that requires extra markup, which seems a shame for a drop in solution.

Write container width dynamically.

Great work guys. Love the plug in.

All examples I see have a container that prevents the video from growing larger (frame size), because the video needs to be set at 100% to be responsive as I understand it. I need the container width to be the same as the original video frame size, max-width. BUT, I do not want to write the width of this container on a case by case basis. Videos on our site can be of any frame width (user generated). What are my options without writing specific width to the container?

Thx in advance guys!

Mauricio