رسپانسیو کردن ویدیوهای وردپرس بدون افزونه

<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>

.wp-video, video.wp-video-shortcode, .mejs-container, .mejs-overlay.load { width: 100% !important; height: 100% !important; } .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; }

$(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(); });