WordPress core responsive video not working with shortcode

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

Live Site : http://www.deekwa.com/dnp

Related posts

1 comment

  1. The width=100% parameter is not valid in the video shortcode. It must be a number, in pixels, or omitted entirely.

    If it is omitted, then the code will use the $content_width global from the theme to define the width of the containing DIV.

    For more info on Content Width, see here:

    http://codex.wordpress.org/Content_Width

Comments are closed.