إضافة تجعل جميع فيديوهات مدونتك على بلوجر متجاوبة
 |
| إضافة تجعل جميع فيديوهات مدونتك على بلوجر متجاوبة |
لكثير من المدونين الذين يملكون حسابات على اليوتيوب 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>