WordPress core responsive video not working with shortcode

2 Views

I cannot get the video from WordPress core to behave responsively.

I’m using the following CSS:

Read More
.videocontent {
  width: 100%;
  height: 100%;
  max-width: 1024px;
  margin: 0 auto;
} 

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

The following HTML using the shortcode doesn’t scale to the full size of the containing div: 

<div class="videocontent">
    <?php
    echo do_shortcode('


');
    ?>
</div>

But using HTML directly it works fine: 

<div class="videocontent">
    <video  id="myvideo2" style="width:90%;height:100%;" controls="controls">
      <source src="http://localhost/dnp/stalker.webm" type="video/webm"/>
    </video>
</div>

I have tried various settings with the shortcode – such as height 100%, height and width 100%, and width 100%.

What am I doing wrong?

Screenshot -> screen shot

Here’s an example of the above – try resizing browser

Post Views: 2

Related posts

Leave a Reply

4 comments

  2. I have been working on a theme and found that when I set max-width for video in the style sheet the WP-embedded video became unresponsive to changes in the browser width.

  3. When WordPress outputs the [video] shortcode it wraps the video in a DIV like:

    <div style="width:640px;height:100px">
   video here ...
</div>

    The width you’re passing into the [video] shortcode can’t be a percentage. So, you need to put a width formatted like 1030 for example.

    <div class="videocontent">
    <?php echo do_shortcode('[video webm="..." width="1030"]'); ?>
</div>

    Currently you’re taking a DIV and styling it to be responsive, but you’re putting this outside of WordPress’s output of the [video] shortcode. In looking at your example, if you scale the page down we can see that the your responsive video is indeed working. However, the problem is that it won’t expand to more than 640px when the site is fully expanded.

    So, I’m thinking you just need to make sure the original output of the video on the expanded site is big enough to fill your responsive wrapping div. Does this work?

    Note: I picked 1030 because that’s how large your content area is on the example you’re linking to.