هل سبق ان حاولت جعل فيديو يوتيوب متجاوب في مواضيع مدونتك ولم تنجح؟ اذا كان الأمر كذلك فأنت في المكان الصحيح، في هذا الشرح سأقدم لك أفضل طريقة لجعل فيديوهات مدونتك متجاوبة 100% داخل كل مقالات بلوجر.
أفضل طريقة لجعل مقاطع فيديو اليوتيوب متجاوبة داخل مشاركات بلوجر
عند وضع اي مقطع فيديو من اليوتيوب في احد مواضيع مدونتك، فغالبا ما يظهر صغير في الوسط بأبعاد غير متجاوبة وهذا ما يشكل مجموعة من المشاكل، اهمها المظهر الغير الجذاب لمشاهدة الفيديو، بالإضافة ان هذا يفرض على متابع الفيديو تكبير مقطع الفيديو بحجم الشاشة، وهذا ما يؤدي الى حجب اعلانات الأدسنس، وبالتالي نسبة النقر على الاعلان ستكون ضئيلة.
كما نعلم ان حجم ظهور الفيديوهات على الهواتف يختلف عن حجم ظهورها على الكمبيوتر وهذا ايضا مشكل آخر يواجه زوار مدونتك.
الشروحات المنتشرة في الأنترنت تفرض عليك وضع تغيير على كل فيديو على حدة في مدونتك، وهذا ما يشكل مجموعة من المصاعب لك خصوصا اذا كنت قد سبق ورفعت مقاطع فيديو كثيرة على مدونتك، فمن صعب البحث عن كل الفيديوهات والتعديل عليها.
لهذا ففي هذا الشرح ستستطيع جعل كل الفيديوهات متجاوبة تلقائيا بدون الحاجة الى تغيير اكواد HTML يدويا.
الفائدة من جعل فيديوهات اليوتيوب متجاوبة مع مواضيع مدونتك هو الحفاظ على زوار مدونتك وتحبيب موقعك لهم، بالإضافة الى إضفاء جمالية على شكل المقال.
كيفية جعل فيديوهات اليوتيوب متجاوبة
العجيب ان تضمينات فيديوهات اليوتيوب لا تتغير ابعادها تلقائيا بإختلاف احجام الأجهزة التي تعرض فيها، لكن بإستعمال بعض الحيل الموجودة في CSS يمكننا جعل فيديوهات اليوتيوب متجاوبة تماما مع اختلاف ابعاد المتصفحات.
خطوات جعل فيديوهات Youtube متجاوبة على مدونة بلوجر
- انسخ كود CSS من هذا الشرح
- توجه الى مدونتك في منصة بلوجر
- توجه الى المظهر ثم تعديل HTML
- ابحث عن ]]></b:skin> وضع كود CSS فوقها
- مرة اخرى انسخ كود JavaScript الذي يناسبك من خلال هذا الشرح
- ابحث عن </body> و ضع اكواد الجافا سكريبت فوقها مباشرة
هذا الشرح يحتوي على افضل طريقة لجعل كل فيديوهات YouTube على مدونتك متجاوبة مئة في المئة وبدون الحاجة الى التعديل يدويا على كل فيديو على حدة.
نبدأ اولا بتركيب اكواد CSS وذلك من خلال وضعها فوق ]]></b:skin> مباشرة
.wraptube {
position: relative;
padding-bottom: 56.25%;
margin: 10px 0;
}
.wraptube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}تستخدم معظم مقاطع فيديو اليوتيوب نسبة عرض الى ارتفاع (aspect ratio) 16:9 لذلك فالطريقة التي تم فيها حساب padding-bottom هو 9 قسمة 16 مضروبة في 100.
في حالة كانت فيديوهاتك تستعمل قيمة مختلفة في aspect ratio فكل ما عليك فعله هو استبدال قيمة padding-bottom بما يناسبك، فعلى سبيل المثال اذا كانت نسبة عرض الى ارتفاع تساوي 4:3 تقوم بقسمة 3 على 4 ثم تضرب الخارج في 100 فإن نسبة padding-bottom في هذه الحالة هو 75%.
الآن قم بتركيب الجافا سكريبت فوق </body> لكن لا بد ان تختار السكريبت الذي يناسب مدونتك في حالة كانت مدونتك تحتوي على مكتبة jQuery قم بإضافة السكريبت التالي فقط.
<script>
/*<![CDATA[*/
$("iframe").each(function() {
var a = $(this);
a.attr("src").match("youtube.com/") && a.wrap("<div class='wraptube'></div>")
});
/* ]]> */
</script>السكريبت التالي صالح للمدونات التي لا تدعم JQuery لا تضعه الا اذا لم يعمل معك السكريبت الأول.
لا يجب وضع السكريبت الأول والثاني معا، اختر واحدا يناسبك.
<script>
/*<![CDATA[*/
! function() {
var e = document.querySelectorAll("iframe");
for (let t = 0; t < e.length; t++)
if (e[t].getAttribute("src").match("youtube.com/")) {
var r = document.createElement("div");
r.className = "wraptube";
var a = e[t].cloneNode(!0);
r.appendChild(a), e[t].insertAdjacentElement("beforebegin", r), e[t].remove()
}
}();
/* ]]> */
</script>اذا كنت لا تريد استعمال اكواد الجافا سكريبت فيمكنك استعمال اكواد HTML والتي يجب عليك في كل مرة تضع فيها تضمين لفيديو في مدونتك ان تقوم بوضع Iframe الفيديو داخل Div التالي.
<div class="wraptube">
قم بوضع تضمين مقطع فيديو اليوتيوب هنا
</div>انتهى شرح أفضل طريقة إحترافية لجعل فيديوهات اليوتيوب متجاوبة داخل مواضيع مدونة بلوجر تلقائيا للمزيد توجه الى شروحات بلوجر كنتم مع محسن حميان على مدونة حميان للمعلوميات