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

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

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

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

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

برای اضافه کردن ویدیو به نوشته یا برگه وردپرس از کدکوتاه یا 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();
});

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

نویسنده: |۱۳۹۷/۱۲/۲۱ ۸:۰۰:۵۶۲۱ اسفند ۱۳۹۷|مقالات آموزشی, وردپرس|۴ دیدگاه

درباره نویسنده:

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

۴ Comments

  1. ابوالفضل ۱ اردیبهشت ۱۳۹۵ در ۷:۲۶ - پاسخ

    سلام
    این کدها رو دقیقا کجا کپی کنم؟

    • اسماعیل ابراهیمی ۱ اردیبهشت ۱۳۹۵ در ۷:۳۵ - پاسخ

      کد جاوااسکریپت رو باید توی فوتر قالبتون قرار بدین و کدهای css رو در فایل rtl.css یا style.css قرار بدین

  2. ابوالفضل ۱ اردیبهشت ۱۳۹۵ در ۹:۰۷ - پاسخ

    قالب من رسپانسیو هستش، نیازی به اضافه کردن این کدها هست ؟

    • اسماعیل ابراهیمی ۱ اردیبهشت ۱۳۹۵ در ۱۰:۵۱ - پاسخ

      در حالت پیش فرض ممکنه کاملاً رسپانسیو نشه ویدیو
      شما با حالت معمولی تست بگیرید اگر مشکل داشت از کدهای این آموزش استفاده کنید

نظر شما چیست