Difficult to make videos work with fluid layouts #163

Closed
dominic-p opened this Issue Apr 1, 2012 · 9 comments

Comments

Projects
None yet
3 participants
Contributor

dominic-p commented Apr 1, 2012

I'm pretty new to video-js, so apologies if I've overlooked something, but after a bit of trying I'm finding it quite difficult to make my videos scale with their container in fluid layouts. With the basic HTML <video> element, you can just remove the width and height attributes and set max-width: 100%, and you're done. But, doing a similar operation to a video-js video causes the entire thing to disappear when I click play.

I found a thread on the video-js forum about this, but the solutions presented there seemed pretty involved and limiting. Is there a simple solution to this that I'm missing?

Owner

heff commented Apr 4, 2012

Do you have a link to your page where I could see this live? Right now it requires a pixel width because browsers don't tell us the size of the video, but this could probably be updated to allow 100%. I'm not sure why the video would disappear though so I'd like to see what's going on.
-heff

On Mar 31, 2012, at 11:28 PM, dominic-p wrote:

I'm pretty new to video-js, so apologies if I've overlooked something, but after a bit of trying I'm finding it quite difficult to make my videos scale with their container in fluid layouts. With the basic HTML <video> element, you can just remove the width and height attributes and set max-width: 100%, and you're done. But, doing a similar operation to a video-js video causes the entire thing to disappear when I click play.

I found a thread on the video-js forum about this, but the solutions presented there seemed pretty involved and limiting. Is there a simple solution to this that I'm missing?


Reply to this email directly or view it on GitHub:
zencoder#163

Contributor

dominic-p commented Apr 5, 2012

Sure, checkout: http://3strandsmarketing.com/video.php. I'm testing a few things on that page. The first one is the fluid width. Basically, I'm using the following code to setup the video and then strip the dimensions to make it fluid. It seems to work great except that when you click play, the video disappears.

_V_( 'vjs-test-fluid', {}, function() {

    var myPlayer = this;

    $( myPlayer.el )
        .removeAttr( 'width' )
        .removeAttr( 'height' )
        .css({
            'width'     : 'auto',
            'height'    : 'auto',
            'max-width' : '100%'
        })
    ;
});

Now that I'm thinking more about it, it probably only seems like it's working because of the poster image which has intrinsic dimensions. Maybe the best solution for this would be a setup option that allows us to say that we want the video to be fluid width if possible. Then, if the browser supports HTML5, video.js doesn't add dimensions to the wrapper <div>, otherwise it does. Does that make any sense?

Contributor

dominic-p commented Apr 7, 2012

Just to illustrate more clearly what I was trying to say above, check out my test page: http://3strandsmarketing.com/video-fluid.php.

The top video uses video.js and the hack I describe above that doesn't work. The middle video is just a vanilla HTML5 video without width or height attributes, and with its CSS width set to 100%. This works beautifully. Of course, the problem is in the 3rd example of a raw flash object. It's width is set to 100% as well, but that doesn't do anything because, like you've said, the browser doesn't know its native dimensions.

So, here's what I'm thinking. If, the setup option I proposed earlier is present (e.g. data-setup={ fullWidth : true }), I'm wondering if we could use the basic CSS width: 100% for when the HTML5 tech is used, and then something like the technique used in fitvidsjs.com, for when the flash player is used. What do you guys think?

@heff heff closed this in 4fb7af6 Apr 9, 2012

Owner

heff commented Apr 9, 2012

Pushed a change that should allow you to do what you want. You can build the lib yourself rake build:current, or check out the diff in the commit to see what I changed.

You still need to make sure whatever contains the player has a width/height. For instance, if you just include the player in an empty body tag, it won't have any height to it (unless you do body { height: 100% }).

Owner

heff commented Apr 9, 2012

Should add, now you would just do <video width="100%" height="100%">

Contributor

dominic-p commented Apr 11, 2012

Thanks for doing that. I finally got a chance to test this, and it's working great on Firefox and Chrome, but I'm see some pretty strange behavior in IE. You can see what I'm seeing here: http://3strandsmarketing.com/video-fluid-2.php

Contributor

dominic-p commented Apr 16, 2012

@heff, just following up to see if you've had a chance to look at the link I posted in IE. For me, the videos show up as small square boxes in IE9.

stary71 commented Nov 2, 2012

Yes. The same problem in IE9. Looks like IE reads "100%" as just "100" (according to the IE developer tool, the video gets 100px width and height). When I change 100% to 90% or so, the IE square gets the corresponding 90px.

stary71 commented Nov 2, 2012

Finally, I had to force IE to assign correct sizes to the video obj:

var introVideo = _V_("home_intro_video");
var w, h, screenW;
jQuery(window).resize(function() {
    screenW = jQuery(window).width();
    // Here goes some calculation:
    w = calculateW(screenW);
    h = calculateH(screenW);
    introVideo.width(w);
    introVideo.height(h);
});

jQuery(window).trigger('resize');

Isn't there any simpler solution?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment