اجعل كل المحتوى المضمّن متجاوبًا مع Reframe.js
الجزء الأكثر صعوبة حول تضمين مقاطع الفيديو هو الحصول على العرض والطول الصحيح. هذه الارقام تحديد نسبة الارتفاع وعندما تكون خارج عليك الحصول على مشغل فيديو متزعزع.
هذا هو صحيح لجميع العناصر المضمنة مثل iframes وأدوات الوسائط الاجتماعية. ويمكن أن تكون هذه الأشياء أكثر تعقيدًا من خلال التصميم المتجاوب لأنها عادة ما تكون لا تستجيب العناصر.
لكن مع Reframe.js, تستطيع فعل أي عنصر استجابة لأي نسبة الارتفاع.
ربما تكون هذه واحدة من أبسط المكونات الإضافية لـ JS على الويب. كان في الواقع التي أنشأتها نادي الدولار حلاقة التي من المدهش أن لديها صفحة جيثب الخاصة بها.
إعادة صياغة هو واحد من الإضافات المجانية مصممة للمطورين الذين يريدون طريقة أبسط من معالجة محتوى مضمن متجاوب.
الجاني الواضح هو الفيديو المضمن من مواقع مثل YouTube و Vimeo. انها سيئة السمعة من الصعب جعل هذه العناصر سريعة الاستجابة دون الخارقة المغلق.
مع Reframe.js ، أنت فقط تحديد أيا كان العنصر الذي تريد استهدافه و إعادة صياغة ذلك باستخدام إعادة صياغة () وظيفة.
ابدأ بإضافة ملحق Reframe.js إلى صفحة الويب الخاصة بك. يمكنك تحميل نسخة من جيثب ، وهو فقط 1 كيلو بايت مصغر.
ثم انت فقط تمرير وظيفة محدد مهما كانت العناصر التي تريد إعادة صياغتها. تحميل الصفحة وازدهار! يجب انك انتهيت.
على سبيل المثال ، دعنا نقول أن لديك بعض مقاطع الفيديو المضمنة في موقعك. يمكنك أضف الفصل .فيديو إلى التضمين, واستخدام ذلك كما محدد. إعادة صياغة يضيف تلقائيا div والطبقة من حوله لخلق نمط استجابة.
بحيث كود جافا سكريبت سيبدو مثل هذا:
إعادة صياغة ( 'الفيديو.')؛
حق بسيط جدا?
هذا الكود يستهدف جميع العناصر مع الفصل .فيديو و يجعلها تستجيب. لا الخارقة اضافية ، لا المغلق اضافية. لا يوجد شيء خاطئ في استخدام طريقة CSS ولكن ستحتاج إلى ذلك التفاف يدويا جميع مقاطع الفيديو المدمجة مع فئة إضافية.
إعادة صياغة فقط يوفر لك هذه الخطوة الإضافية ويجلب كل ذلك من خلال جافا سكريبت. إلى تحقق من التجريبي و العثور على بعض مقتطفات الشفرة الأساسية, تفضل بزيارة الصفحة الرئيسية لموقع Reframe.js. يمكنك قم بتنزيل نسخة من الكود مباشرة من الريبو جيثب.
