تضمين مقاطع الفيديو المستجيبة بسهولة مع SuperEmbed.js

الشبكة الحديثة هي استجابة كاملة والمزيد من المصممين يدركون هذا كل يوم. ولكن هناك تحدٍ غريب عندما يتعلق الأمر بالتصميم المتجاوب: محتوى مضمن.

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

ومع ذلك ، بدلاً من استخدام فئة حاوية CSS ، يمكنك استخدام SuperEmbed.js, مكتبة جافا سكريبت الحرة ل إنشاء مقاطع فيديو سريعة الاستجابة.

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

أفضل جزء هو أن SuperEmbed.js لا يتطلب أي رمز إضافي, لذلك يمكنك فقط تضمين الملفات و دعهم يركضون. تهتم مكتبة JS بالباقي استهداف العناصر المضمنة من بعض المواقع.

جميع مقاطع الفيديو الحفاظ على نسب الجانب المحدد, لذلك لا داعي للقلق بشأن الأبعاد المتزعزع. و SuperEmbed يعمل ك مكتبة الفانيليا مع لا التبعيات مثل مسج.

الآن ، SuperEmbed يدعم 15+ تضمين الفيديو من مواقع مثل YouTube و Vimeo و Kickstarter و DailyMotion و Facebook و Vid.me و Archive.org (من بين العديد من المواقع الأخرى). هذه القائمة هي لا يزال ينمو, لذلك توقع إضافة المزيد من خدمات بث الفيديو مع مرور الوقت.

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

يمكنك تحميل أ نسخة كاملة من GitHub repo والذي يتضمن أيضًا المواصفات الخاصة بـ مواقع الفيديو المدعومة و دعم المتصفح الحالي.

بالنسبة للجزء الأكبر ، SuperEmbed يدعم جميع المتصفحات الحديثة من FireFox 3.5+ و Chrome 4+ وإصدارات Internet Explorer 9 أو أعلى.

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

يمكنك إيجاد معلومات اكثر على جيثب ويمكنك أن ترى ذلك تشغيل مباشر في هذا الكمان.