كيفية - إطار Iframe المتجاوب
تعرف على كيفية إنشاء إطارات مضمنة سريعة الاستجابة باستخدام CSS.
إطارات Iframes المتجاوبة
قم بإنشاء إطار iframe يحافظ على نسبة العرض إلى الارتفاع (4: 3 ، 16: 9 ، إلخ) عند تغيير حجمه:
ما هي نسبة العرض إلى الارتفاع؟
تصف نسبة العرض إلى الارتفاع للعنصر العلاقة التناسبية بين عرضه وارتفاعه. نسبتا العرض إلى الارتفاع الشائعة للفيديو هما 4: 3 (تنسيق الفيديو العالمي للقرن العشرين) و 16: 9 (عالمي للتلفزيون عالي الدقة والتلفزيون الرقمي الأوروبي ومقاطع فيديو YouTube).
كيفية - إطارات Iframes المتجاوبة
الخطوة 1) أضف HTML:
استخدم عنصر حاوية ، مثل <div> ، وأضف إطار iframe بداخله:
مثال
<div class="container">
<iframe
class="responsive-iframe"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
الخطوة 2) أضف CSS:
أضف قيمة النسبة المئوية padding-top
للمحافظة على نسبة العرض إلى الارتفاع للحاوية DIV. سيُنشئ المثال التالي نسبة عرض إلى ارتفاع تبلغ 16: 9 ، وهي نسبة العرض إلى الارتفاع الافتراضية لمقاطع فيديو YouTube.
مثال 16: 9 نسبة العرض إلى الارتفاع
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container
div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
نسب أخرى:
مثال 4: 3 نسبة العرض إلى الارتفاع
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio */
}
مثال 3: 2 نسبة العرض إلى الارتفاع
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio */
}
مثال 8: 5 نسبة العرض إلى الارتفاع
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio */
}
مثال 1: 1 نسبة العرض إلى الارتفاع (الطول والعرض متساويان دائمًا)
.container {
padding-top: 100%; /*
1:1 Aspect
Ratio */
}