چگونه ایجاد می‌شود: Iframe‌های پاسخگو

آموزش نحوه استفاده از CSS برای ایجاد iframe‌های پاسخگو.

چگونه - Iframe‌های پاسخگو

مرحله اول - اضافه کردن 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 */
}

آزمایش کنید