عقول للمعلوميات عقول للمعلوميات
حلقات

آخر الأخبار

حلقات
جاري التحميل ...

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



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

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

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

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_ وفي الأخير إضغط على حفظ/المشاركة .

عن الكاتب

Chafik Ouadine

التعليقات


اتصل بنا

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

جميع الحقوق محفوظة

عقول للمعلوميات