How to Make the WordPress Video Shortcode Responsive. See http://cfxdesign.com/how-to-make-the-wordpress-video-shortcode-responsive

shortcode.css

.wp-video, video.wp-video-shortcode, .mejs-container, .mejs-overlay.load {
	width: 100% !important;
	height: 100% !important;
}
.mejs-container {
	padding-top: 56.25%;
}
.wp-video, video.wp-video-shortcode {
	max-width: 100% !important;
}
video.wp-video-shortcode {
	position: relative;
}
.mejs-mediaelement {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.mejs-controls {
	display: none;
}
.mejs-overlay-play {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto !important;
	height: auto !important;
}

shortcode.html

<div class="video">
  [video mp4="video.mp4" webm="video.webm" autoplay="on" preload="auto"]
</div>

shortcode.js

$(function() {
  $('.mejs-overlay-loading').closest('.mejs-overlay').addClass('load'); //just a helper class

  var $video = $('div.video video');
  var vidWidth = $video.attr('width');
  var vidHeight = $video.attr('height');

  $(window).resize(function() {
    var targetWidth = $(this).width(); //using window width here will proportion the video to be full screen; adjust as needed
    $('div.video, div.video .mejs-container').css('height', Math.ceil(vidHeight * (targetWidth / vidWidth)));
  }).resize();
});

shortcode_result.html

<div class="video">
  <div style="width: 640px; height: 360px; " class="wp-video">
    <!--[if lt IE 9]><script>document.createElement('video');</script><![endif]-->
    <video class="wp-video-shortcode" id="video-4-1" width="640" height="360" autoplay="on" preload="auto" controls="controls">
      <source type="video/mp4" src="video.mp4?_=1" />
      <source type="video/webm" src="video.webm?_=1" />
      <a href="video.mp4">video.mp4</a>
    </video>
  </div>
</div>

Worked like a charm! Really appreciate this. Thank you for sharing 🙌

Thank you :)

Very helpful CSS thanks!

Thank you! CSS still works perfectly for me

Appeciate!