I cannot get the video from WordPress core to behave responsively.
I’m using the following CSS:
.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
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