طريقة إضافة فيديوهات اليوتيوب الى بلوجر وجعلها متجاوبة responsive مع الأجهزة المحمولة والذكية

طريقة إضافة فيديوهات اليوتيوب الى بلوجر وجعلها متجاوبة responsive مع الأجهزة المحمولة والذكية

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


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

2- نبحث عن الكود التالي:

]]></b:skin>
3- ونضع فوقه هذا الكود
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
} .video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.entry-content img,
.entry-content iframe,
.entry-content object,
.entry-content embed {
max-width: 100%;}

4- قم بحفظ القالب
5- إستعمل هذا الكود الثاني عند كل تدوينة جديدة بعد نسخك لرابط تضمين الفيديو من يوتوب, وقم بإستبدال مكان "رابط مشاركة الفيديو" بالرابط المضمن من يوتيوب

<div class="video-container">رابط تضمين الفيديو</div>

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

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



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -