كيفية إنشاء: Iframe مرونة

تعلم كيفية إنشاء iframe مرونة باستخدام CSS.

كيفية - Iframes مرونة

الخطوة الأولى - إضافة HTML:

استخدام عنصر الصندوق مثل <div> وأضف iframe:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

الخطوة الثانية - إضافة CSS:

ل padding-top إضافة قيم النسبة المئوية للحفاظ على نسبة العرض إلى الارتفاع للصندوق div. في المثال التالي، سيتم إنشاء صندوق ذو نسبة عرض إلى ارتفاع 16:9، وهي نسبة عرض إلى ارتفاع افتراضية للفيديوهات على YouTube.

مثال - نسبة عرض إلى ارتفاع 16:9

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* نسبة عرض إلى ارتفاع 16:9 (9 ÷ 16 = 0.5625) */
}
/* بعد ذلك، قم بتعيين النمط لـ iframe ليتناسب مع الارتفاع والعرض الكاملين للصندوق div */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

جرب بنفسك

نسب عرض إلى ارتفاع أخرى

مثال - نسبة عرض إلى ارتفاع 4:3

.container {
  padding-top: 75%; /* نسبة عرض إلى ارتفاع 4:3 */
}

جرب بنفسك

مثال - نسبة عرض إلى ارتفاع 3:2

.container {
  padding-top: 66.66%; /* نسبة عرض إلى ارتفاع 3:2 */
}

جرب بنفسك

مثال - نسبة عرض إلى ارتفاع 8:5

.container {
  padding-top: 62.5%; /* نسبة عرض إلى ارتفاع 8:5 */
}

جرب بنفسك

مثال - 1:1 نسبة العرض إلى الارتفاع (طول العرض والعرض متساويان دائمًا)

.container {
  padding-top: 100%; /* نسبة عرض:ارتفاع 1:1 */
}

جرب بنفسك