SuperEmbed.js के साथ आसानी से उत्तरदायी वीडियो एम्बेड करें

आधुनिक वेब है पूरी तरह से उत्तरदायी और अधिक डिजाइनर हर दिन इसे साकार कर रहे हैं। लेकिन जब यह उत्तरदायी डिजाइन की बात आती है तो एक pesky चुनौती होती है: एम्बेडेड सामग्री.

YouTube से Vimeo तक की प्रत्येक वीडियो साइट में एक है डिफ़ॉल्ट एम्बेड कोड एक निश्चित आकार के लिए तय किया गया। इसका मतलब है कि डेवलपर्स को अन्य समाधानों का उपयोग करने की आवश्यकता है पूरी तरह से उत्तरदायी वीडियो बनाएं.

हालांकि, सीएसएस कंटेनर वर्ग का उपयोग करने के बजाय, आप उपयोग कर सकते हैं SuperEmbed.js, के लिए एक मुफ्त जावास्क्रिप्ट पुस्तकालय उत्तरदायी वीडियो बनाना.

यह प्लगइन दो समस्याओं को हल करता है तुरंत। सभी एम्बेडेड वीडियो होगा मुख्य कंटेनर को भरने के लिए खिंचाव, जबकि यह भी काफी लचीला है ब्राउज़र विंडो के आधार पर आकार बदलें.

सबसे अच्छी बात यह है कि SuperEmbed.js कोई अतिरिक्त कोड की आवश्यकता है, तो आप बस कर सकते हैं फ़ाइलों को एम्बेड करें तथा उन्हें चलने दो. यह जेएस लाइब्रेरी बाकी की देखभाल करता है कुछ साइटों से एम्बेडेड तत्वों को लक्षित करना.

सभी वीडियो उनके विशिष्ट पहलू अनुपात बनाए रखें, तो आप winky आयाम के बारे में चिंता करने की जरूरत नहीं है। और SuperEmbed एक के रूप में काम करता है वेनिला जेएस लाइब्रेरी साथ में कोई निर्भरता नहीं जैसे कि jQuery.

अभी, SuperEmbed 15+ वीडियो एम्बेड का समर्थन करता है YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me, और Archive.org (कई अन्य लोगों के बीच) जैसी साइटों से। यह सूची है अब भी बढ़ रहा है, इसलिए समय के साथ और वीडियो स्ट्रीमिंग सेवाओं को जोड़ने की उम्मीद करें.

इस उपकरण को काम करने के लिए, आपको बस जरूरत है पुस्तकालय डाउनलोड करें तथा इसे अपनी साइट के हेडर में जोड़ें इस तरह:

आप एक डाउनलोड कर सकते हैं पूरी तरह से नकल GitHub रेपो से जिसमें चश्मा भी शामिल है समर्थित वीडियो साइटें तथा वर्तमान ब्राउज़र समर्थन.

अधिकांश भाग के लिए, SuperEmbed सभी आधुनिक ब्राउज़रों का समर्थन करता है फ़ायरफ़ॉक्स 3.5+, क्रोम 4+ और इंटरनेट एक्सप्लोरर 9 या उच्चतर संस्करणों से.

यह एक बहुत ही प्रभावशाली पुस्तकालय है जो सभी ब्राउज़र समर्थन और यह कितनी अच्छी तरह से विचार करता है सही बॉक्स से बाहर काम करता है. यदि आप जावास्क्रिप्ट पर निर्भर हैं, तो यह CSS हैक्स की तुलना में बहुत सरल उपाय है.

तुम खोज सकते हो अधिक जानकारी GitHub पर और आप इसे देख सकते हैं लाइव चल रहा है इस बेला में.