0

Using wordpress 3.6 and can embed video in pages/posts. But These videos are not responsive. Is there a way to make them responsive? I found a style="width:100%; height:100%" method for media element player but don't know how to use it with video tag.

2

Try adding this CSS:

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

.wp-audio-shortcode {
    max-width: 100%;
}
  • 1
    Please add an explanation to your answer: why could that solve the problem? – fuxia Aug 14 '13 at 21:46
  • Are yo sure? I can try it some other day. Right now I opted for JWPlayer. Thanks. – mysterious Aug 15 '13 at 15:08
0

Yep, it's called intrinsic aspect ratio. Here is an article from CSS tricks on the subject.

The idea is that you create a video wrapper div with no height, and 100% width. Then you give it a certain percentage of padding in the y direction. Since everything is based on percents, the container will stretch with the width of it's parent element while maintaining it's aspect ratio, which is importan for video.

The last step is to make the video positioned absolutely with top, right, bottom, and left all set to zero to lock the sides onto the video container div that we talked about earlier.

The markup looks like this

<style>
   .video-container {
      position: relative;
      height: 0px;
      width: 100%;
      padding-bottom: 56.25%; /* 16:9 */
      padding-top: 25px;
   }

   .video {
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
   }
</style>

<div class="video-container">
   <div class="video">
      <!---VIDEO GOES HERE--->
   </div>
</div>
  • This is assuming you have access to the code. If not, you may be stuck until WP updates how the video gets pulled into the page. – joshrathke Aug 12 '13 at 18: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.