or Create a profile

NOTICE: FORUMS MOVING

Thank you for visiting and participating in the Video.js forums. We are currently moving the forums to Stack Overflow and GitHub Issues. If you have a question or need help with Video.js, please post your question on Stack Overflow and add the tag 'video.js'. If you've found a specific bug in Video.js, please submit it in the issues tracker.

You can read more about this move on the blog.

Home → Questions →

Dynamic resizing of videos using video-js

billcullencreative's Avatar

billcullencreative

19 Nov, 2010 09:00 PM

Hi

I would like to dynamically re-size Video for use in a fluid website as in the following example.
http://www.alistapart.com/d/creating-intrinsic-ratios-for-video/exa...

The full explanation is at.
http://www.alistapart.com/articles/creating-intrinsic-ratios-for-vi...

However, I would also like to use videojs because of its functionality across multiple platforms.

Consequentially I would like to be able to dynamically resize Video-JS.

I'm not sure whether I would need to alter the video js css file or create another separate css file?

Any pointers would be appreciated.

Bill Cullen

  1. Support Staff 2 Posted by Steve Heffernan on 19 Nov, 2010 09:06 PM

    Steve Heffernan's Avatar

    You can try myPlayer.width("640"); etc. Version 2 will be out soon that supports resizing for the fallback player as well.

  2. 3 Posted by billcullencreative on 19 Nov, 2010 09:12 PM

    billcullencreative's Avatar

    Hi Steve

    Thanks very much for your swift response. I will try your suggestion.

    Cheers.

  3. 4 Posted by niall thompson on 30 May, 2011 05:14 PM

    niall thompson's Avatar

    Bill / Steve,

    Did you find a solution based on this suggestion? Any tips or pointers much appreciated.

    Ideally I wish to include VideoJS in my responsive design. i.e column widths are percentages...

    Here's hoping...

  4. 5 Posted by billcullencreative on 30 May, 2011 06:17 PM

    billcullencreative's Avatar

    Hi Nail/Steve

    Yes, I did work it out and I think it looks great. It only required a
    minor tweak to the code and css file. Everything resizes whilst the
    video is playing and it works in all browsers including older IE.

    The exercise was for our own site which is not yet live, so I can't
    point you to a live site.

    I will upload an example and post the URL and tweaks when I get a chance
    (hopefully tomorrow).

    Cheers.

    Bill

  5. 6 Posted by Niall Thompson on 31 May, 2011 11:28 AM

    Niall Thompson's Avatar

    Thanks for the quick response Bill. Looking forward to seeing the solution...

    Niall

  6. 7 Posted by billcullencreative on 02 Jun, 2011 01:50 PM

    billcullencreative's Avatar

    Hi Niall/Steve

    I've put a demo page up on the following link
    http://www.radishcreative.co.uk/videoJs/jennie_jones_videojs.html

    You should be able to link to the css files from the page. The videoJS
    css file has also been amended.

    For some reason the big button has disappeared except on fall-back (IE 7,8).

    Also, for some reason the video is playing anamorphic 4:3 in Safari.
    I'll have to look at that later.

    I hope this helps.

    Bill

  7. 8 Posted by Niall Thompson on 02 Jun, 2011 11:43 PM

    Niall Thompson's Avatar

    Thanks Bill.

    It's definitely interesting.

    In your JS file you have removed:

    ` / Resize Tracking -------------------------------------------------------------- /

    resizeListeners: [],
onResize: function(fn){
  this.resizeListeners.push(fn);
},
// Trigger anywhere the video/box size is changed.
triggerResizeListeners: function(){
  this.each(this.resizeListeners, function(listener){
    (listener.context(this))();
  });
}

    } );`

    This causes the controls to disappear and it also does not load the mp4 properly.

    If you keep the code block in the video will resize but only on refresh of the browser...

    Something tells me there is a solution in there somewhere.

    Just not sure where...

    Niall

  8. 9 Posted by billcullencreative on 03 Jun, 2011 09:26 AM

    billcullencreative's Avatar

    Hi Niall

    Ah! I didn't realise removing the resize tracking would disable the big
    button.

    I'm not a JavaScript expert more of a video one, hence the interest in
    resizing videos.

    I just hope this helps to point the experts in the right direction.

    Bill

  9. 10 Posted by Barney on 09 Jun, 2011 03:15 AM

    Barney's Avatar

    I'm very keen to implement this as well. Is there a solution? Can we have videos (including flash fallback) that resize with the browser window? It would be great to be able to use a video as a background for a page, or as a part of a page. If the current code supports this, can someone explain?

  10. 11 Posted by Niall Thompson on 09 Jun, 2011 09:11 AM

    Niall Thompson's Avatar

    I am not that well versed in JS but I wonder if the magic of Chris Coyier can help:

    http://css-tricks.com/examples/FluidWidthYouTube/iframe.php

  11. 12 Posted by Niall Thompson on 06 Jul, 2011 01:38 PM

    Niall Thompson's Avatar

    Anyone have any luck with this yet?

    Adding this to the CSS helps but only on refresh:

    img,
    embed,
    object,
    video {
    max-width: 100%; }

    Any thoughts, developments or examples appreciated...

    Niall

  12. 13 Posted by Martin on 25 Aug, 2011 04:39 PM

    Martin's Avatar

    Is there any news on this? Am following closely. Would love for a solution that scales the fall back too. When is version 2 out?

  13. 14 Posted by Eric Guess on 09 Nov, 2011 06:53 PM

    Eric Guess's Avatar

    So v2 is out, but I'm not seeing how to make this responsive? Is there a solution for this? I've been trying to use VideoJS along with FitVids.js but to no avail.

  14. 15 Posted by Ville on 22 Nov, 2011 05:29 PM

    Ville's Avatar

    I'd love to know if there is an option for this already or there is something on the way - unmeddled HTML5 video is easily made responsive with css...

  15. 16 Posted by Sarah Hills on 24 Nov, 2011 10:19 AM

    Sarah Hills's Avatar

    I've tried to post to this thread twice now (the last time was yesterday) but my post doesn't appear for some bizarre reason??

    I think I may have a solution to this problem, but it's not letting me post it! Just trying this short post without any code to see if that appears...

  16. 17 Posted by Sarah Hills on 24 Nov, 2011 10:43 AM

    Sarah Hills's Avatar

    Ok, so I guess my other post was either too long or contained something in it which wasn't allowed. I've just posted (what is hopefullly!) a solution on my own website instead: http://www.hexagonwebworks.com/2011/making-videos-responsive/

    I hope that helps someone!

  17. 18 Posted by roger on 24 Nov, 2011 12:13 PM

    roger's Avatar

    Sarah, that's very good of you ... I am looking in to this problem myself at the moment, but don't quite have the CSS "chops" !

    My own investigations threw up FitVids as well, though I haven't tried it with VideoJS. And FWIW, I have also been using WPTouchPro, which seems to handle all this kind of stuff automatically, all by itself, at least when I'm using VideoJS with it. But, it's nice to have a handle on the technicals that lie beneath, even if I will have to go and lie down after looking at the CSS.

    Anyway, thanks again.

    R.

  18. 19 Posted by billcullencreative on 24 Nov, 2011 12:58 PM

    billcullencreative's Avatar

    Hi Sarah

    Many thanks for your solution.

    I will try it out as soon as I can.

    I hope all is well in sunny Oxfordshire.

    Cheers.

    Bill Cullen

  19. 20 Posted by wyclef_thechronic on 15 Dec, 2011 04:50 PM

    wyclef_thechronic's Avatar

    what's the latest with this?

  20. 21 Posted by Sarah Hills on 16 Dec, 2011 11:46 AM

    Sarah Hills's Avatar

    @wyclef_thechronic: I'm not aware that there is any formal stance on this from VideoJS, but as per my post above, it is possible to make a VideoJS video responsive via the addition of a containing HTML div and some CSS.

    It would be interesting to hear whether anyone else gets this working successfully...

  21. 22 Posted by wyclef_thechronic on 19 Dec, 2011 07:06 PM

    wyclef_thechronic's Avatar

    yea, your example looks solid. i'm struggling a bit because i'm also trying to vertically center the video in the browser window which is adding a layer of ugh to the mix.... haha.

  22. 23 Posted by billcullencreative on 19 Dec, 2011 07:17 PM

    billcullencreative's Avatar

    Hi @wyclef_thechronic

    You could check out http://www.radishcreative.co.uk and navigate to
    people/Bill Cullen or people/Jennie Jones for an example of dynamically
    resizing video using VideoJS script along with Sarah Hills css.

    Bill

  23. 24 Posted by DirtyWorld on 18 Aug, 2012 10:11 PM

    DirtyWorld's Avatar

    Hi,
    I found this http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/
    it work perfect.

    Greets

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

14 people watching.

  • New Issue

  • Conversation Started

    A conversation has been started with the Video.js - HTML5 Video Player staff to resolve this discussion.

  • Close the discussion

Recent Discussions

22 May, 2013 05:28 PM flash version fullscreen doesn't resume at current timestamp
04 Mar, 2013 05:51 PM Embedding Videojs in a forum in phpbb3 using bbcode
22 May, 2013 11:58 AM FLV Videos Not Playing
22 May, 2013 11:58 AM Live streaming
22 May, 2013 05:47 AM Support for a no flash plugin detected plugin?

 

18 Apr, 2013 07:50 PM Poster-Image at Video End
06 Dec, 2012 11:57 PM Youtube Extend
11 Aug, 2012 06:46 PM Playlist or interactive thumbnail playlist