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

[fusion_builder_container hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”no” min_height=”” hover_type=”none” link=””][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” class=”” id=””]

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

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

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

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

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

  • facebook
  • googleplus
  • twitter
  • linkedin
  • linkedin
  • linkedin

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

  • twitter
  • googleplus

۴ نظرات در حال حاضر

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

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

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *