वर्डप्रेस 3.0+ के बाद से, आप अपने टेक्स्ट एडिटर में वीडियो साइट के यूआरएल को पेस्ट करके आसानी से अपने लेखों में यूट्यूब वीडियो एम्बेड कर सकते हैं। फिर वर्डप्रेस बाकी काम करेगा और वीडियो को आपकी साइट पर एम्बेड करने के लिए आवश्यक कोड डालेंगे। यह सब बढ़िया है, सिवाय इसके कि एम्बेड वीडियो की चौड़ाई और ऊंचाई उपसर्ग है और आप इसे बदल नहीं सकते हैं। क्या हो सकता है कि या तो वीडियो आपकी थीम के लिए बहुत छोटा है, या सामग्री क्षेत्र में फ़िट होने के लिए बहुत बड़ा है। यदि आप अपनी साइट के लिए उत्तरदायी थीम का उपयोग कर रहे हैं, तो आप पाएंगे कि जब आप ब्राउज़र का आकार बदलते हैं तो वीडियो स्केल नहीं होता है और आखिरकार आपकी थीम को तोड़ देता है।

उदाहरण के लिए, यह हुआ कि:

ध्यान दें कि वीडियो सामग्री कंटेनर की पूरी चौड़ाई नहीं लेता है?

ध्यान दें कि जब आप ब्राउज़र का आकार बदलते हैं तो वीडियो स्केल नहीं होता है और यह सामग्री कंटेनर से बाहर चला जाता है और थीम को तोड़ देता है?

इसे ठीक करने के लिए, हमें एक स्क्रिप्ट का उपयोग करने की आवश्यकता है - फ़िटविड्स - जो आपके एम्बेडेड वीडियो को पूर्ण-चौड़ाई उत्तरदायी ऑब्जेक्ट में बदल देगा और ब्राउज़र के आकार बदलने के बाद स्वचालित रूप से स्केल करेगा।

व्यक्तिगत रूप से, मैंने सर्वर ओवरहेड को कम करने के लिए सीधे फिटविड्स स्क्रिप्ट को थीम में एकीकृत किया है, लेकिन उन लोगों के लिए जो कोडिंग में अनुभव नहीं कर रहे हैं, वहां एक प्लगइन है जो आपके लिए यह कर सकता है: वर्डप्रेस के लिए फिटविड्स।

1. WordPress प्लगइन के लिए FitVids स्थापित और सक्रिय करें।

2. "उपस्थिति -> फिटविड्स" पर जाएं।

3. यदि आप पूरी तरह से सुनिश्चित हैं कि jQuery स्क्रिप्ट (संस्करण 1.6 और ऊपर का संस्करण) पहले से ही आपकी थीम में शामिल है, तो "jQuery जोड़ें" फ़ील्ड को खाली छोड़ दें। यदि नहीं, तो "jQuery जोड़ें" के बगल में स्थित बॉक्स को चेक करें।

4. "jQuery चयनकर्ता" फ़ील्ड थोड़ा मुश्किल है क्योंकि यह प्रत्येक साइट के लिए अलग हो सकता है। अधिकांश उदाहरण के लिए, आप केवल इनपुट क्षेत्र में " बॉडी " (उद्धरण के बिना) शब्द दर्ज कर सकते हैं और इसे काम करना चाहिए। हालांकि, यदि आप वीडियो के साथ एक विशिष्ट कंटेनर को माइक्रो-लक्षित करना चाहते हैं, तो आप इस क्षेत्र में कंटेनर के आईडी / वर्ग को रख सकते हैं, उदाहरण के लिए: " #video-container ", " #content ", " .entry-content " आदि।

नोट : टेक्स्ट के सामने "#" और "।" क्रमशः सीएसएस में "आईडी" और "कक्षा" का प्रतिनिधित्व करते हैं।

5. अब, एम्बेडेड वीडियो के साथ पोस्ट देखें। आपको ऐसा कुछ देखना चाहिए:

वीडियो अब सामग्री कंटेनर की पूरी चौड़ाई लेता है

जब आप ब्राउज़र का आकार बदलते हैं तो यह ऑटो-स्केल होता है।

निष्कर्ष

FitVids आपके एम्बेडेड वीडियो को एक उत्तरदायी ऑब्जेक्ट में कनवर्ट करने के लिए स्क्रिप्ट का उपयोग करना आसान है। इसे आज़माएं और हमें बताएं कि यह आपके लिए उपयोगी है या नहीं।