WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. wormeyman
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 8 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 8 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 8 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 month 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).

Topic Closed

This topic has been closed to new replies.

About this Topic