التجاوب هو حديث هذا العام , فيعد الزيادة الهائلة في نسبة استخدام الهواتف لتصفح شبكة الويب اصبح لابد من الاهتمام بجانب تجاوب المواقع مع شاشات الهواتف المحمولة , ومحركات البحث تنظر الى جانب تجاوب المواقع نظرة اهتمام وتعاقب المواقع الغير متجاوبة .
تجاوب محتوى الموقع لايقل اهمية عن تجاوب القالب الخاص به , فعند دخول زائر الى موقعك باستخدام المحمول يجب ان يُعرض له محتوى متناسق و متجاوب مع شاشة الهاتف الخاصة به , في هذا المقال سنتناول جانب تجاوب الفيديوهات الموجودة في المدونة مع الشاشات بحيث تتغير مقاسات عرض الفيديو بتغير مقاس الشاشة .
طريقة تركيب الكود
لجعل فيديوهات مدونتك متجاوبة قم بالتوجه للوحة التحكم الرئيسية في بلوجر > المظهر > تحرير 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>
ثم قم بحفظ القالب , بعدها نأتي لمرحلة الاستخدام , عند تضمين فيديو داخل مواضيعك اضف قبله وبعده الكودين ادناه بحيث يكون كود الفيديو بينهما ...
<div id=”your-video”>
كود الفيديو
</div>
كود الفيديو
</div>
مثال لذلك ...
<div id=”your-video”>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/wQOAfLZqB_0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
بذلك تصبح جميع الفيديوهات التي تضيفها الى
محتوى موقعك متجاوبة , ومتناسقة مع حجم الشاشة التي يستخدمها الزائر ,
ودمتم في حفظ الله ورعايته
ليست هناك تعليقات:
إرسال تعليق