WordPress 3.6 native player is not responsive?

Question

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.

Answer 1

Try adding this CSS:

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

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

Answer 2

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>