जब आप आम तौर पर किसी साइट पर वीडियो एम्बेड करते हैं, तो फ्रेम का आकार कोड में दर्शाया जाता है और यह पता चलता है कि जब आप स्क्रीन रिज़ॉल्यूशन बदलते हैं, तो विभिन्न डिवाइसों पर साइट पर एम्बेड किया गया वीडियो स्क्रीन को ध्यान में रखे बिना प्रदर्शित होता है, जैसे कि आपने इसे वीडियो होस्टिंग पर ही खोला था।
हमारा कार्य यह सुनिश्चित करना है कि जब पृष्ठ का आकार बदलता है, तो वीडियो फ़्रेम स्वचालित रूप से अपना आकार बदलता है। विभिन्न उपकरणों से साइट खोलने पर, वीडियो स्क्रीन आकार के अनुसार समायोजित हो जाएगा।
इस मैनुअल का परीक्षण YouTube और MediaCMS एप्लिकेशन के साथ किया गया है।
डिफ़ॉल्ट रूप से आपको एक लिंक प्राप्त होता है जैसे:
<iframe width="560" height="315" src="https://synay.dev/embed?m=d0xUIusUo" frameborder="0" allowfullscreen></iframe>
वीडियो को स्वचालित रूप से समायोजित करने के लिए, आइए इस कोड को फ़ॉर्म में लाएँ:
<div class="container">
<iframe src="https://synay.dev/embed?m=d0xUIusUo"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
जैसा कि आप देख सकते हैं, हमने निश्चित आकार हटा दिए हैं और 2 सीएसएस कक्षाएं जोड़ दी हैं: कंटेनर और वीडियो।
अब हमें इन कक्षाओं को अपनी साइट की स्टाइल फ़ाइल में जोड़ने की आवश्यकता है:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
कंटेनर तत्व को शून्य ऊंचाई और प्रतिशत तली पैडिंग दी गई है। नीचे की पैडिंग का प्रतिशत कंटेनर की चौड़ाई का एक प्रतिशत है, इसलिए इसका एक निश्चित पहलू अनुपात है। लेकिन आईफ्रेम को शून्य-ऊंचाई वाले कंटेनर के अंदर प्रदर्शित करने के लिए, हमें कंटेनर को एक डिव के अंदर स्थित करके सापेक्ष और आईफ्रेम को पूर्ण बनाने की आवश्यकता है।
अपनी सीएसएस फ़ाइल के पथ में संस्करण जोड़ना न भूलें ताकि जब आप इसे दोबारा खोलें, तो वास्तविक स्टाइल फ़ाइल लोड हो, न कि ब्राउज़र द्वारा पहले से सहेजा गया कैश्ड संस्करण।
उदाहरण:
<link rel="stylesheet" href="https://domain.tld/css/style.min.css?_v=202408222001">
अब आपका एम्बेडेड वीडियो स्वचालित रूप से स्क्रीन आकार या ब्राउज़र विंडो आकार के अनुकूल हो जाएगा।