چگونه ایجاد شود: 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، مقادیر درصدی اضافه کنید. در مثال زیر یک 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 Aspect Ratio */
}

پس از همه چيز امتحان كنيد