الثلاثاء، 25 أكتوبر 2016

طريقة جعل فيديو يوتيوب متجاوب مع جميع الأجهزة في مدونة بلوجر




من المشاكل التي قد تواجهها عند وضع فيديو يوتيوب في مدونتك قد تجده غير متجاوب مع الأجهزة الأخرى كالهاتف وكما نعلم أن الكثير من الزوار أصبحو يستعملون الهواتف وتابلت لتصفح المواقع ولهذا ستخسر العديد من المشاهدات للفيديو الموجود في مدونتك لذلك سأقدم لكم طريقة لحل هذا المشكل .

فيديو يوتيوب متجاوب مع جميع الأجهزة في المدونة

طريقة جعل فيديو يوتيوب متجاوب مع جميع الشاشات في مدونة بلوجر :

1_  ادخل إلى لوحة تحكم بلوجر > قالب > تحرير html >
 ابحث عن الوسم ]]></b:skin> ثم أضف الكود التالي فوقه
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

2_ الان بعد إضافة كواد الـ CSS من أجل أن تعمل الإضافات يجب علينا إضافة كود جافا سكريبت التالي فوق الوسم  </body>
<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

3_ ثم إضغط على حفظ النمودج

4_  تضيف الكود التالي في الموضوع بعد تحويل صندوق الكتابة من وضع التأليف الى وضع HTML

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>

على سبيل المثال هذا الفيديو تريد نشره على المدونة تضغط على مشاركة ثم تضمين ستنسخ مثل ماهو في الصورة


ثم تقوم بإستبدال SIMPAN-LINK-EMBED-VIDEO-DI-SINI برابط الموجود المضمن في الفيديو كما هو موضح في الإقتباس التالي
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/TMMBRv7Jd_A">
</div>
</div>
</div>

5_ وفي الأخير إضغط على حفظ/المشاركة .

لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"