تعليق: عندما قمت بتشفير موضوع Elemin (موقع استجابة قمت بتصميمه مؤخرًا) ، كان أحد الأطراف التي واجهتها هو كيفية جعل مقاطع الفيديو المضمنة أكثر مرونة في التغييرات في الحجم ؛ من خلال ساعات البحث عن البيانات والتجارب ، وجدت أخيرًا حلاً
عندما قمت بتشفير موضوع Elemin (موقع استجابة قمت بتصميمه مؤخرًا) ، كان أحد الأطراف التي واجهتها هو كيفية جعل مقاطع الفيديو المضمنة أكثر مرونة في الحجم. باستخدام Max-Width: 100 ٪ والارتفاع: يمكن لـ Auto جعل علامة الفيديو HTML5 تعمل بشكل جيد ، ولكن هذا الحل لا يعمل مع رمز مضمّن لعلامات IFRame أو الكائن. بعد عدة ساعات من البحث عن البيانات والتجارب ، وجدت أخيرًا حلاً. تأتي تقنية CSS هذه في متناول يدي عندما تقوم بتصميم متجاوب.
علامة فيديو HTML5 المرنة
باستخدام فيديو HTML5 ، يمكنك جعله مرنًا عن طريق تعيين عرض الحد الأقصى: 100 ٪. في المقدمة السابقة ، تم الإشارة إلى أنه لا ينطبق على IFRAMES الشائعة الاستخدام والرموز المضمنة في الكائنات.
فيديو {
Max-Width: 100 ٪ ؛
الارتفاع: السيارات ؛
}
كائن مرن ومقاطع فيديو مضمنة IFRAME
هذه الخدعة بسيطة للغاية ، تحتاج إلى إضافة حاوية <viv> إلى الفيديو وتعيين قيمة خاصية حشوة القاع من DIV بين 50 ٪ و 60 ٪. ثم اضبط عرض وارتفاع عنصر الطفل (Ifame أو كائن) إلى 100 ٪ ، واستخدم تحديد المواقع المطلقة. هذا يفرض الكائن المدمج على التوسع تلقائيًا إلى الحد الأقصى.
CSS
.video-container {
الموقف: قريب
حشو القاع: 56.25 ٪ ؛
الحشو أعلى: 30 بكسل ؛
الارتفاع: 0 ؛
الفائض: مخفي.
}
.
كائن.
.
الموقف: مطلق ؛
أعلى: 0 ؛
اليسار: 0 ؛
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
}
HTML
<viv>
<iframe src = "http://player.vimeo.com/video/6284199؟title=0&byline=0&portrait=0" frameborder = "0"> </frame>
</div>
تحقيق المرونة في العرض الثابت
إذا كان عرض الفيديو محدودًا ، فنحن بحاجة إلى حاوية إضافية <DIV> للف الفيديو وتعيين عرض ثابت وعرض الحد الأقصى: 100 ٪ لـ DIV.
CSS
.video-wrapper {
العرض: 600 بكسل ؛
Max-Width: 100 ٪ ؛
}
HTML
<viv>
<viv>
<iframe src = "http://player.vimeo.com/video/6284199؟title=0&byline=0&portrait=0" frameborder = "0"> </frame>
</div>
<!- /video->
</div>
<!- /video-wrapper->
التوافق
تدعم هذه الخدعة جميع المتصفحات ، بما في ذلك: Chrome و Safari و Firefox و Internet Explorer و Opera و iPhone و iPad.