Makes the video embeds in Wordpress posts responsive.
jQuery(document).ready(function () {
jQuery(function () {
jQuery('.mejs-overlay-loading').closest('.mejs-overlay').addClass('load'); //just a helper class
var $video = jQuery('div.video video');
var vidWidth = $video.attr('width');
var vidHeight = $video.attr('height');
jQuery(window).resize(function () {
var targetWidth = jQuery(this).width(); //using window width here will proportion the video to be full screen; adjust as needed
jQuery('div.video, div.video .mejs-container').css('height', Math.ceil(vidHeight * (targetWidth / vidWidth)));
}).resize();
});
});
.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;
}
WordPress Snippet