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

قبلاً در مقاله “نمایش فایل ویدیوی در وردپرس بدون افزونه” روش های درج ویدیو در وردپرس را بدون افزونه بررسی کردیم .

اگر دقت کرده باشید بعد از درج یک ویدیو در وردپرس رسپانسیو یا تعاملی بودن بخش مربوط به ویدیو صحیح نیست و در دستگاه های مختلف به صورت صحیح در کنار یا بین سایر محتوا نمایش داده نمی شود ( البته استثنایی که وجود دارد این است که برخی پوسته های حرفه ای روی این قسمت نیز کار کرده اند و آن را به نحو خوب پیاده سازی کرده اند) .

برای اضافه کردن ویدیو به نوشته یا برگه وردپرس از کدکوتاه یا shortcode ویدیو به شکل زیر استفاده می کنیم :

[video mp4="video.mp4" webm="video.webm" autoplay="on" preload="auto"]

این کد کوتاه باعث ایجاد تگ های HTML زیر در مرورگر کاربر خواهند شد :

شما می توانید از کد CSS زیر برای تکمیل رسپانسیو بودن ویدیوهای وردپرس استفاده کنید :

.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;
}

معمولاً و در اکثر موارد کد CSS بالا برای تصحیح رسپانسیو ویدیوهای وردپرس کافی می باشد ، اما چنانچه به هر دلیلی کد CSS بالا اینکار را انجام نداد ، می توانید از کد جاوااسکریپ زیر نیز در فوتر قالب خود استفاده کنید :

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

امیدواریم این مقاله به رسپانسیو شدن ویدیوهای وردپرسی شما کمک کرده باشد .