jeje

الاثنين، 16 نوفمبر 2015

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

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

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

قد يهمك أيضًا: كيفية إخفاء وإظهار ادوات  مدونة بلوجر على الهاتف

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

<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>


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

0 التعليقات:

إرسال تعليق