-->
U3F1ZWV6ZTgxNTE0OTE0NjFfQWN0aXZhdGlvbjkyMzQ1MTU0NjUz
recent
أخبار ساخنة

كيفية جعل فيديو متجاوب وصديق للسيو فى بلوجر / اضافات بلوجر

إضافة تجعل جميع فيديوهات مدونتك على بلوجر متجاوبة


إضافة تجعل جميع فيديوهات مدونتك على بلوجر متجاوبة


لكثير من المدونين الذين يملكون حسابات على اليوتيوب YouTube او على منصات الاخرى مثل Dailymotion, Vimeo يقوم برفع فيديوهاتهم على هذه المنصات و يقومون ايضا بتضمينها على مدوناتهم على بلوجر .
لكن المشكل ان هذه الفيديوهات لانجد مقاساتها متجاوبة مع عرض المواضيع و خاصة على شاشات الاجهزة الذكية مثل الهواتف و التابلات و شاشات الكمبيوتر الاخرى .
فى هذا الدرس ان شاء الله ساقدم لكم طريقة حصرية ورائعة لجعل فيديوهات YouTube , Dailymotion, Vimeo متجاوبة مع جميع الشاشات الذكية دون الحاجة الى تدخل منك اثناء تضمينها فى تدويناتك , حيث سوف نستخدم سكريبات تجعل جميع الفيديوهات التى اضفتها على مدونتك متجاوبة مع جميع انواع الشاشات الذكية بكل سهولة و لتعطي انطباع جيد لزوارك

إضافة تجعل جميع فيديوهات مدونتك على بلوجر متجاوبة


  • بالرغم من انه من الضرورى إستخدام قالب متجاوب لموقعك ليظهر بشكل جيد للمستخدمين الذين
  •  يتصفحون موقعك من خلال الهواتف المحمولة إلا أنه لابد من مراعاة أن يكون المحتوى
  •  أيضًا متجاوب بما يضمه من نصوص وصور وفيديوهات وجداول ،.......وغير ذلك . 
  • وقد تحدثت فى موضوع سابق عن كيفية جعل الفيديو متجاوب لجميع الشاشات والتى تعتمد على إضافة كود CSS 
  • قبل كود الفيديو ولكن اليوم سأتحدث عن إضافة بتقنية jQuery تسمى Fitvids plugin تضاف إلى القالب.



  • ولتركيب هذه الإضافة لقالب مدونة بلوجر:
  • إذهب إلى لوحة تحكم بلوجر ثم تبويب قالب
  • قم بتحرير HTML للقالب (ولا تنسى الإحتفاظ بنسخة إحتياطية من القالب)
  • إبحث عن الكود التالى بإستخدام لوحة المفاتيح Ctrl+F

أضف الكود التالى مباشرة فوق الكود السابق

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"/>
<script src='https://raw.github.com/davatron5000/FitVids.js/master/jquery.fitvids.js'/>
   <script>$(document).ready(function(){
$(“#your-video”).fitVids();
});
</script> 

إحفظ القالب
عند تضمين أى فيديو داخل مشاركة أو صفحة أضف الكود التالى قبل كود تضمين الفيديو بتبويب HTML المشاركة أو الصفحة.

<div id=”your-video”> 

مثــــــــــال


<div id=”your-video”>

<iframe width="1280" height="720" src="https://www.youtube.com/embed/wQOAfLZqB_0?rel=0" frameborder="0" allowfullscreen></iframe>

الاسمبريد إلكترونيرسالة