कैसे बनाएं: Responsive Iframe

CSS के द्वारा Responsive iframe कैसे बनाया जाता है सीखें。

How To - Responsive 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 अनुपात */
}

स्वयं प्रयोग करें