CSS के साथ अपनी वेबसाइट पर 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 को ब्राउज़र में सही आस्पेक्ट रेशियो के साथ प्रदर्शित करने के लिए एक निश्चित ऊंचाई और चौड़ाई की आवश्यकता होती है। यह 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, 16 का 56.25% है।
यदि आपके एम्बेडेड वीडियो का आस्पेक्ट रेशियो 4:3 है, तो आप वीडियो कंटेनर के टॉप पैडिंग की गणना इस तरह करेंगे:
3/4 * 100 = 75%
और इसी तरह।
