CSS के साथ YouTube वीडियो एम्बेड को उत्तरदायी कैसे बनाएं

अपनी वेबसाइट पर YouTube वीडियो एम्बेड करना सीखें और इसे सीएसएस के साथ मोबाइल से डेस्कटॉप डिवाइस पर पूरी तरह से प्रतिक्रियाशील बनाएं।

अगर आप YouTube से एम्बेड किए गए वीडियो कोड को कॉपी करते हैं और आपको एक <iframe> . मिलता है रैपर जो इस तरह दिखता है:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/uga8GWzdv3c"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

दुर्भाग्य से, iframes को ब्राउज़र में सही पक्षानुपात के साथ प्रदर्शित करने के लिए एक निश्चित ऊंचाई और चौड़ाई की आवश्यकता होती है। यह आईफ्रेम को आउट ऑफ द बॉक्स रिस्पॉन्सिव डिजाइन के साथ असंगत बनाता है।

सौभाग्य से, आप अपने iframe को पैरेंट कंटेनर में लपेटकर अपने वीडियो को एम्बेड कर सकते हैं:

<div class="youtube-video-container">
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/uga8GWzdv3c"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

और फिर अपने वीडियो कंटेनर को CSS से स्टाइल करें:

.youtube-video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.youtube-video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.youtube-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

पहलू अनुपात की गणना करना

क्या आप सोच रहे हैं कि 56.25% . क्या है? पैडिंग-टॉप के बारे में है? यह YouTube वीडियो के पक्षानुपात पर आधारित है, जो कि 16/9 है।

अपने वीडियो कंटेनर को प्रतिक्रियाशील बनाने के लिए सटीक पैडिंग मान प्राप्त करने के लिए, आपको बस यह पता लगाना होगा कि ऊंचाई मान चौड़ाई मान का कितना% है:

9/16 * 100 =56.25%

9 है 56.25% 16.

अगर आपके एम्बेड किए गए वीडियो का पक्षानुपात 4:3 है, तो आप वीडियो कंटेनर के शीर्ष पैडिंग की गणना इस तरह करेंगे:

3/4 * 100 =75%

और इसी तरह।