Reframe.js के साथ सभी एंबेडेड सामग्री को उत्तरदायी बनाएं

के बारे में पेचीदा हिस्सा वीडियो एम्बेड करना चौड़ाई और ऊंचाई सही हो रही है। ये नंबर पहलू अनुपात को परिभाषित करें और जब वे चले जाएँगे एक विस्की वीडियो प्लेयर प्राप्त करें.

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

लेकिन इसके साथ Reframe.js, आप बना सकते किसी भी पहलू अनुपात के लिए उत्तरदायी कोई भी तत्व.

यह शायद वेब पर सबसे सरल अभी तक सबसे मूल्यवान जेएस प्लगइन्स में से एक है। यह वास्तव में था डॉलर शेव क्लब द्वारा बनाया गया जो आश्चर्यजनक रूप से अपना स्वयं का GitHub पृष्ठ है.

Reframe है उनके मुक्त प्लगइन्स में से एक डेवलपर्स के लिए बनाया गया है, जो एक सरल तरीका चाहते हैं उत्तरदायी एम्बेडेड सामग्री को संभालना.

स्पष्ट अपराधी YouTube और Vimeo जैसी साइटों से वीडियो एम्बेडेड है। यह कुख्यात है इन तत्वों को उत्तरदायी बनाना मुश्किल है सीएसएस हैक के बिना.

Reframe.js के साथ, आप बस चुनते हैं आप जिस भी तत्व को लक्षित करना चाहते हैं और इसका खंडन करें का उपयोग करते हुए reframe () समारोह.

अपने वेब पेज पर Reframe.js प्लगइन जोड़कर शुरू करें। आप ऐसा कर सकते हैं एक प्रति डाउनलोड करें GitHub से, और यह केवल 1KB छोटा है.

फिर, आप बस फ़ंक्शन को चयनकर्ता पास करें जो भी तत्व आप को वापस करना चाहते हैं. पेज लोड करें और उछाल! आपको सब सेट होना चाहिए.

उदाहरण के लिए, मान लें कि आपकी साइट पर कुछ वीडियो एम्बेड किए गए हैं। आप ऐसा कर सकते हैं वर्ग जोड़ें .वीडियो एम्बेड करने के लिए, और चयनकर्ता के रूप में उपयोग करें। reframe स्वचालित रूप से इसके चारों ओर एक div और वर्ग जोड़ता है उत्तरदायी शैली बनाने के लिए.

तो आपका जावास्क्रिप्ट कोड इस तरह दिखेगा:

reframe ( 'वीडियो।');

बहुत सरल सही?

यह कोड कक्षा के सभी तत्वों को लक्षित करता है .वीडियो तथा उन्हें उत्तरदायी बनाता है. कोई अतिरिक्त हैक नहीं, कोई अतिरिक्त सीएसएस नहीं। सीएसएस विधि का उपयोग करने के बारे में कुछ भी गलत नहीं है, लेकिन आपको इसकी आवश्यकता होगी मैन्युअल रूप से लपेटो अतिरिक्त वर्ग के साथ सभी एम्बेडेड वीडियो.

बस फिर से शुरू आपको वह अतिरिक्त कदम बचाता है और जावास्क्रिप्ट के साथ यह सब लाता है। सेवा मेरे एक डेमो देखें तथा कुछ बुनियादी कोड स्निपेट ढूंढें, Reframe.js होमपेज पर जाएं। आप ऐसा कर सकते हैं कोड की एक प्रति डाउनलोड करें GitHub रेपो से सीधे.