কিভাবে তৈরি করা যায়: প্রতিক্রিয় Iframe

কিভাবে CSS ব্যবহার করে প্রতিক্রিয় iframe তৈরি করবেন তা শিখুন。

কিভাবে - প্রতিক্রিয় Iframes

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

কাস্টমার ইলিমেন্ট, যেমন <div> ব্যবহার করে এবং তারইভিত্তে iframe যোগ করুন:

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

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

জন্য padding-top পেশেন্ট হার যোগ করুন, যাতে কাস্টমার ডিভ-এর অপসারণ অনুপাত রাখা যায়। নিচের উদাহরণ একটি 16:9 অপসারণ অনুপাতসহ কাস্টমার ডিভ তৈরি করে, যা YouTube ভিডিওর ডিফল্ট অপসারণ অনুপাত

প্রকল্প - 16:9 অপসারণ অনুপাত

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 অপসারণ অনুপাত (9 / 16 = 0.5625) */
}
/* তারপর iframe-এর শৈলী নির্ধারণ করুন, যাতে এটি কাস্টমার ডিভ-এর পূর্ণ উচ্চতা এবং প্রস্থান অনুসারে অপসারণ করে */
.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 宽高比 */
}

亲自试一试