3

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

Improve this question

1 Answer 1

Reset to default
2

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

Improve this answer
6
  • 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 :) Commented Nov 6, 2013 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? Commented Nov 6, 2013 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. Commented Nov 7, 2013 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... Commented Nov 7, 2013 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. Commented Nov 8, 2013 at 13:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.