अपनी वेबसाइट पर रिस्पॉन्सिव वीडियो कैसे जोड़ें

विषय

• जावास्क्रिप्ट समाधान
• फ़ॉलबैक जोड़ना
• एक कस्टम वीडियो विक्रेता जोड़ें
• निष्कर्ष

वेब डिज़ाइन उद्योग तीव्र गति से विकसित हो रहा है। इसलिए, कभी-कभी, हमें नई तकनीकों को ध्यान में रखते हुए अपनी डिजाइन और विकास तकनीकों को समायोजित करने की आवश्यकता होती है।

उत्तरदायी वेब डिज़ाइन (RWD) हमारी आधुनिक डिज़ाइन प्रक्रिया में लगभग एक आवश्यकता बन गई है। जबकि यह तेजी से बढ़ रहा है और परिपक्व हो रहा है, यह अभी भी अपनी प्रारंभिक अवस्था में है।

वीडियो बनाओ। आप उम्मीद करेंगे कि YouTube या Vimeo से हमारे द्वारा लिए गए एम्बेड कोड हमारी छवियों की तरह ही प्रतिक्रियाशील होंगे। नीचे दिया गया कोड वह है जो YouTube वेब पेजों में वीडियो एम्बेड करने के लिए प्रदान करता है; यह एक सुंदर मानक है आईफ्रेम.

iframe चौड़ाई="560" ऊंचाई="315" src=" हाइपरलिंक "http://www.youtube. com/embed/Gk_fLeK7Uk4" http://www.youtube.com/embed/Gk_fLeK7Uk4" frameborder="0" allowfullscreen>/iframe>

लेकिन, यदि हम इस मार्कअप को अपने HTML में डालते हैं, तो वीडियो 560px गुणा 315px की एक निश्चित चौड़ाई बनाए रखेगा, चाहे ब्राउज़र या डिवाइस स्क्रीन का आकार कुछ भी हो। यदि हम मूल HTML5 वीडियो या एक छवि के साथ काम कर रहे हैं, तो निम्नलिखित सीएसएस को जोड़ना एक आसान समाधान होगा:

इफ्रेम {चौड़ाई: १००%; ऊंचाई: ऑटो; }

एक कार्यशील उदाहरण के लिए ट्यूटोरियल फ़ाइलें देखें। यहां हम इन्हें लक्षित कर रहे हैं आईफ्रेम की चौड़ाई के साथ 100% हमारे कंटेनर और height की ऊंचाई को फैलाने के लिए ऑटो. यदि आप इसे स्वयं करने का प्रयास करते हैं, तो आप देखेंगे कि वीडियो पूरी चौड़ाई का है, लेकिन ऊंचाई अनुपात का पालन नहीं करती है। हम इसे एक सरल, शुद्ध सीएसएस समाधान के साथ ठीक कर सकते हैं।

सबसे पहले, हमें अपने एम्बेड कोड को एक अतिरिक्त HTML तत्व में लपेटना होगा, जैसा कि नीचे दिखाया गया है। निम्नलिखित div कंटेनर को अपने में जोड़ें आईफ्रेम.

div > iframe width="560" height="315" src=" HYPERLINK "http://www.youtube.com/embed/Gk_fLeK7Uk4" http://www.youtube.com/embed/Gk_fLeK7Uk4" फ्रेमबॉर्डर="0 "अनुमतिपूर्णस्क्रीन>/iframe> /div>

इसके बाद, हम अपनी CSS फ़ाइल में निम्नलिखित जोड़ते हैं:

.वीडियो-कंटेनर { स्थिति: रिश्तेदार; पैडिंग-बॉटम: 56.25%; पैडिंग-टॉप: 30px; ऊंचाई: 0; बहुत ज्यादा गोपनीय; }

वीडियो-कंटेनर कक्षा जिसे हमने चारों ओर लपेटा है आईफ्रेम इसमें कुछ पोजिशनिंग और पैडिंग लागू है। पद सापेक्ष संलग्न सेट करेगा आईफ्रेम, जो बिल्कुल, सबसे अधिक सापेक्ष पैरेंट कंटेनर में स्थित है। हम प्रयोग करते हैं पैडिंग शीर्ष डिजाइन के आधार पर हमारे वीडियो की स्थिति को ठीक करने के लिए जहां हमें इसकी आवश्यकता है।

नीचे गद्दी करना प्रतिशत 16:9 पक्षानुपात से निर्धारित होता है। यदि आप नौ को 16 से विभाजित करते हैं, तो आपको मिलता है 56.25%. आप देखेंगे कि हम उपयोग कर रहे हैं नीचे गद्दी करना, ऊंचाई: 0 तथा बहुत ज्यादा गोपनीय. ये मुख्य रूप से इंटरनेट एक्सप्लोरर फिक्स हैं, जो हमारे समाधान को सभी ब्राउज़रों पर काम करने में मदद करेंगे।

अब, हम इन्हें लक्षित करेंगे आईफ्रेम, वस्तु तथा एम्बेड निम्नलिखित के साथ:

.वीडियो-कंटेनर आईफ्रेम, .वीडियो-कंटेनर ऑब्जेक्ट, .वीडियो-कंटेनर एम्बेड {स्थिति: पूर्ण; शीर्ष: 0; बाएं: 0; चौड़ाई: 100%; ऊंचाई: 100%; }

चूंकि हमने फ्रेम को पर रखा है पूर्ण, हम सेट करेंगे ऊपर तथा बाएं सेवा मेरे 0. यह वीडियो को हमारे कंटेनर के ऊपरी बाएँ कोने में सेट कर देगा। आप अपने डिज़ाइन से मेल खाने के लिए इन सेटिंग्स को बदल सकते हैं।

आइए हमारे उदाहरण का परीक्षण करें और परिणाम देखें। एक कार्यशील उदाहरण के लिए ट्यूटोरियल फ़ाइलें देखें।

अब हमारे पास एक पूरी तरह से तरल YouTube वीडियो है जो हमारे प्रतिक्रियाशील डिज़ाइन में अंतर्निहित है। यह समाधान Vimeo के साथ भी काम करेगा (हालाँकि इसका परीक्षण अन्य विक्रेताओं के प्लेटफ़ॉर्म पर नहीं किया गया है)। यह अत्यंत प्रभावी है, आसानी से कार्यान्वित किया जाता है और यह क्रॉस-ब्राउज़र-अनुकूल भी है।

जावास्क्रिप्ट समाधान

जबकि हमारा समाधान जावास्क्रिप्ट पर निर्भर नहीं करता है, ऐसे अन्य विकल्प भी हैं जिन्हें जावास्क्रिप्ट के समर्थन की आवश्यकता होती है। टॉड मोटो का FluidVids.js वैनिला जावास्क्रिप्ट में लिखा गया है। आरंभ करने के लिए, इसे डाउनलोड करें और अपनी वेबसाइट पर जावास्क्रिप्ट जोड़ें।

फ़ॉलबैक जोड़ना

कभी-कभी, उपयोगकर्ताओं के पास जावास्क्रिप्ट अक्षम हो सकता है, खासकर कुछ मोबाइल उपकरणों पर। एक साधारण फ़ॉलबैक निम्नलिखित होगा:

iframe {अधिकतम-चौड़ाई: १००%; }

एक अन्य लोकप्रिय जावास्क्रिप्ट समाधान FitVids.js है, जिसे "एक हल्का, उपयोग में आसान jQuery प्लग-इन द्रव चौड़ाई वीडियो एम्बेड के लिए" के रूप में वर्णित किया गया है। FitVids को CSS-Tricks के संस्थापक क्रिस कॉयर और परवेल ने बनाया था।

यह उसी तरह काम करेगा जैसे टोड मोटो के FluidVids, जावास्क्रिप्ट पर निर्भर करता है। उदाहरण के लिए:

स्क्रिप्ट src="path/to/jquery.min.js">/script> script src="path/to/jquery.fitvids.js">/script> script> $(document).ready(function(){ / / अपने कंटेनर, .wrapper, .post, आदि को लक्षित करें $("#thing-with-videos").fitVids(); }); /स्क्रिप्ट>

वेबसाइट कहती है, "यह प्रत्येक वीडियो को एक में लपेट देगा div.fluid-चौड़ाई-वीडियो-आवरण और आवश्यक सीएसएस लागू करें। प्रारंभिक जावास्क्रिप्ट कॉल के बाद, यह सभी प्रतिशत-आधारित सीएसएस जादू है।" FitVids वर्तमान में YouTube, Vimeo, Blip.tv, Viddler और Kickstarter का समर्थन करता है।

एक कस्टम वीडियो विक्रेता जोड़ें

FitVids के पास एक कस्टम विक्रेता जोड़ने का विकल्प है। जैसा कि दस्तावेज़ीकरण में विस्तृत है, जावास्क्रिप्ट फ़ाइल में निम्नलिखित जोड़ें:

$("#thing-with-videos").fitVids({customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']" });

निष्कर्ष

उत्तरदायी वेब डिज़ाइन अभी भी बढ़ रहा है और ऐसा करना जारी रखेगा। वेब डिज़ाइनर और डेवलपर के रूप में, हमें यह सुनिश्चित करने की ज़रूरत है कि हमारी सामग्री सभी प्लेटफ़ॉर्म, ऑपरेटिंग सिस्टम, ब्राउज़र और डिवाइस पर पहुंच योग्य हो। कभी-कभी हमें इसे प्राप्त करने के लिए अतिरिक्त मील जाने की आवश्यकता होती है। सरल समाधान, जैसे कि इस लेख में वर्णित हैं, चाहे जावास्क्रिप्ट में हों या सीएसएस में, लागू करना बहुत आसान है और हमारे उपयोगकर्ताओं के लिए बहुत बड़ा अंतर है। जैसे-जैसे तकनीक आगे बढ़ेगी, नए आसान-से-कार्यान्वयन समाधान सामने आएंगे, या यहां तक ​​कि विक्रेताओं के उत्पादों में बेक किए जाएंगे। तब तक, हमें समाधान खोजने की जरूरत है। हर प्रोजेक्ट अलग होता है, इसलिए आपके द्वारा चुना गया समाधान आपके लक्ष्यों पर निर्भर करेगा।

शब्दों: जॉन सुरदाकोव्स्की

यह आलेख मूल रूप से नेट पत्रिका अंक 247 में प्रकाशित हुआ था।