कैसे करें - उत्तरदायी इफ्रेम
CSS के साथ प्रतिक्रियाशील iframes बनाने का तरीका जानें।
उत्तरदायी इफ्रेम्स
एक आईफ्रेम बनाएं जो आकार बदलने पर पक्षानुपात (4:3, 16:9, आदि) बनाए रखेगा:
पहलू अनुपात क्या है?
किसी तत्व का पक्षानुपात उसकी चौड़ाई और ऊँचाई के बीच आनुपातिक संबंध का वर्णन करता है। दो सामान्य वीडियो पक्षानुपात हैं 4:3 (20वीं सदी का सार्वभौमिक वीडियो प्रारूप), और 16:9 (HD टेलीविज़न और यूरोपीय डिजिटल टेलीविज़न के लिए सार्वभौमिक, और YouTube वीडियो के लिए)।
कैसे करें - उत्तरदायी इफ्रेम्स
चरण 1) HTML जोड़ें:
एक कंटेनर तत्व का प्रयोग करें, जैसे <div>, और इसके अंदर आईफ्रेम जोड़ें:
उदाहरण
<div class="container">
<iframe
class="responsive-iframe"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
चरण 2) सीएसएस जोड़ें:
padding-topकंटेनर DIV का पक्षानुपात बनाए रखने के लिए प्रतिशत मान जोड़ें . निम्न उदाहरण 16:9 का पक्षानुपात बनाएगा, जो YouTube वीडियो का डिफ़ॉल्ट पक्षानुपात है।
उदाहरण 16:9 पक्षानुपात
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container
div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
अन्य पहलू अनुपात:
उदाहरण 4:3 पक्षानुपात
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio */
}
उदाहरण 3:2 पक्षानुपात
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio */
}
उदाहरण 8:5 पक्षानुपात
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio */
}
उदाहरण 1:1 पक्षानुपात (ऊंचाई और चौड़ाई हमेशा बराबर होती है)
.container {
padding-top: 100%; /*
1:1 Aspect
Ratio */
}