WordPress.org

Ready to get started?Download WordPress

Forums

Responsive video - can i set width to 100%? (8 posts)

  1. wormeyman
    Member
    Posted 11 months ago #

    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?

  2. Chris
    Member
    Posted 11 months ago #

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

    .wp-video-shortcode {
    	max-width: 100%;
    }
    
    .wp-audio-shortcode {
    	max-width: 100%;
    }
  3. wormeyman
    Member
    Posted 11 months ago #

    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!

  4. Chris
    Member
    Posted 11 months ago #

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

    .wp-video-shortcode {
    	max-width: 100%;
    }
    
    .wp-audio-shortcode {
    	max-width: 100%;
    }
  5. smit_ralph
    Member
    Posted 7 months ago #

    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?

  6. hiphopinenglish
    Member
    Posted 7 months ago #

    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.

  7. smit_ralph
    Member
    Posted 7 months ago #

    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 ;-)

  8. enxaqueca
    Member
    Posted 1 week ago #

    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).

Reply

You must log in to post.

About this Topic