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">
    echo do_shortcode('[video webm="http://localhost/dnp/stalker.webm" width=100%]');

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"/>

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:


| improve this answer | |
  • Hi Otto - Thanks very much.. I have taken a look and this is what I need. I will pass on the information to all the others having trouble with shortcode sizing :) – pcrx20 Nov 6 '13 at 20:52
  • I have tried this and it does work - must say it seems odd that you can't pass any variable into the function? It would make life a lot easier than constantly setting a global variable in order to get video and images to scale to different sized containers? – pcrx20 Nov 6 '13 at 23:04
  • You can set a fixed width if you like, in pixels, with width=640 or similar. But the point of having the theme define the content width is so that you don't have to do that. The theme knows what the width is supposed to be, and it should tell the rest of the system that number so it can scale to it. – Otto Nov 7 '13 at 18:56
  • How about if you wanted video to scale to different size containers throughout a page? Ie. top container div is full width, next row you have two containing divs of 1/2 width... You'd have do keep changing a global variable (content_width) before each call to the do_shortcode function? Why not just pass in a variable? Doesn't seem a elegant programming approach IMHO... – pcrx20 Nov 7 '13 at 22:32
  • Well, for one, you shouldn't be making any such calls to "do_shortcode". That's the real lack of elegance here. Content should be displayed by having a Loop to display Posts or Pages or some other content type. Setting a global content_width isn't the best solution, but it's a reasonable one for now, until a better and more universal way can be devised for themes to pass that information along to arbitrary code calls inside The Loop. – Otto Nov 8 '13 at 13:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.