Support » Fixing WordPress » Responsive video – can i set width to 100%?

  • In 3.6 when i upload a 1080p mp4 video is there a way to set the width to 100% so that it will scale on any device size?

    below is my default embed
    [video width="600" height="388" mp4="video.mp4"][/video]

    What i would like to be able to put in.
    [video width="100%" height="388" mp4="video.mp4"][/video]

    However if i put in width=100% it seems to sanitize it to width=100px.

    Any thoughts is there functionality i can add to my functions.php or css?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Chris

    (@eminemdrdre00)

    Use your first shortcode there, but add this to your CSS file:

    .wp-video-shortcode {
    	max-width: 100%;
    }
    
    .wp-audio-shortcode {
    	max-width: 100%;
    }

    Does that work for you Eminemdrdre00? I already seem to have the max-width: 100%; before the css. With YouTube iframes i can make the video responsive but not with the wordpress native html5 video player!

    Chris

    (@eminemdrdre00)

    Yeah, adding the following to my CSS file worked for me:

    .wp-video-shortcode {
    	max-width: 100%;
    }
    
    .wp-audio-shortcode {
    	max-width: 100%;
    }

    Hi,

    For a part this hint works great, thx, the video won’t exceed the size of the browser window. What I want is to restrict the video to a div size. Is that in any way possible?

    J M

    (@hiphopinenglish)

    The video CSS will refer to the containing div.
    If you set a div with a max width of 300 pixels, and set the video max-width to be 100%, it won’t ever be bigger than 300px.

    Ah yes.. The things was, using html5 video in a wordpress page gets me an non-id container div that sets the width (550px if none is set). So I had to get that particular div to be set at a fixed width. That div is the only one used directly within my posts so, I used:

    .post-entry > div {width: 280px}

    and all was fixed. Didn’t even need the CSS markup mentioned here before.

    Thx for the hint 😉

    Thank you, Chris. Using this CSS I was able to make my videos responsive using the video shortcode in an HTML5 responsive theme (Genesis with Dynamik skin).

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Responsive video – can i set width to 100%?’ is closed to new replies.