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

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

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

طريق تركيب الإضافة :

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/2k38Yc-qR6I"> </div> </div> </div>

 5. وأخيرا حفظ / نشر المشاركات .