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.

Width and Height to 100%

Hardy Reyes's Avatar

Hardy Reyes

20 Jul, 2012 08:48 PM

I am creating a html that I upload this video to 100% as I need to resize if the user resizes the window.

When I do this, the video does not run, or rather run, but with errors.

Someone could help me?

  1. 2 Posted by Sarah on 27 Jul, 2012 09:26 AM

    Sarah's Avatar

    I used this which resizes the video when the screen is resized so it is always 1005:

    http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/

  2. 3 Posted by steph.blue_star775 on 31 Jul, 2012 02:52 PM

    steph.blue_star775's Avatar

    I used this and it seems to be working well at the moment
    http://www.hexagonwebworks.com/2012/responsive-videos-updated/

  3. 4 Posted by phil on 13 Aug, 2012 04:32 AM

    phil's Avatar

    try this css. You need to force the video to min-width 100% but keep the width on 'auto'.

    video-container {

    height: 100%; width: 100%; left: 0; top: 0; overflow: hidden; position: absolute; }

    video-container #track, #video-container #track_html5_api {

    min-height: 100%; min-width: 100%; height: auto !important; width: auto !important; position: absolute; left: 0; top: 0; }

  4. 5 Posted by phil on 13 Aug, 2012 04:33 AM

    phil's Avatar

    or this...

    video-container {

    height: 100%; width: 100%; left: 0; top: 0; overflow: hidden; position: absolute; }

    video {
    min-height: 100%; min-width: 100%; height: auto !important; width: auto !important; position: absolute; left: 0; top: 0; }

  5. 6 Posted by Karen on 23 Jul, 2013 08:14 PM

    Karen's Avatar

    Check out this small js that will resize the video with the window. http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/

    I used it and it works. I altered the code to use .reveal-modal-video as the parent element

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.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

30 Jul, 2014 03:25 AM
28 Jul, 2014 08:32 AM
27 Jul, 2014 07:35 PM
23 Jul, 2014 04:00 PM
21 Jul, 2014 10:07 PM

 

18 Jul, 2014 10:13 PM
17 Jul, 2014 09:04 PM
15 Jul, 2014 02:53 PM
09 Jul, 2014 03:01 AM
08 Jul, 2014 08:01 PM
07 Jul, 2014 04:57 PM