इन्टरनेट पर कार्य करते हुए कई बार आप ऐसी परेशानियों से रूबरू हो जाते हैं जिनसे पहले आपका पाला नहीं पड़ा था। जब यह परेशानियाँ आपके समक्ष आती हैं तो आप पहले तो अपना सिर खुजाते हैं, थोड़ी देर तक स्क्रीन को तकते हैं और फिर उसका हल ढूँढने में लग जाते हैं।
जब हल मिल जाए तो आप आगे बढ़ जाते हैं। यह ब्लॉग बनाने से पहले मैं भी यही करता था लेकिन फिर जब ब्लॉग बना तो अब उस परेशानी का निवारण करने के बाद उसका हल यहीं डाल देता हूँ।
पिछले हफ्ते भी मैं एक ऐसी ही परेशानी से दो चार हुआ। हुआ यूँ कि मैंने कुछ दिनों पहले एक यूट्यूब विडियो तैयार किया और उसे अपने ब्लॉग पर पोस्ट किया। मैं अक्सर लैपटॉप से ही विडियो पोस्ट करता हूँ तो इस बार भी ऐसे ही किया। मैंने ब्लॉग चेक किया तो सब सही था लेकिन फिर किसी ने मुझे बताया कि उन्हें विडियो नहीं दिख रहा है।
मोबाइल में एम्बेडेड विडियो को कैसे दिखायें |
यह मेरे लिए थोड़ा परेशानी का सबब बन चुका था। एक बार दोबारा लैपटॉप पर देखा तो सब सही था। थोड़ी देर मैं परेशान रहा लेकिन फिर मोबाइल पर चेक करने की सोची। चूँकि मैंने लिंक व्हाट्सएप्प किया था तो ज्यादा सम्भावना थी कि उक्त व्यक्ति ने मोबाइल में ही लिंक खोला होगा। फिर जब मैंने अपने मोबाइल फोन पर लिंक को चेक किया तो पाया कि सूचना देने वाले सही थे।
मोबाइल में विडियो नहीं दिख रहा था।
यानी ब्लॉगर का एक और इशू मेरे सामने आया था।
इस परेशानी के विषय में मैंने सर्च किया तो आखिरकार दिक्कत मिली और उसका निवारण किया। अगर आपको भी ऐसी कोई परेशानी पेश आ रही है तो आप भी इस पोस्ट पर दी गयी चीजों का पालन कर इसे दूर कर सकते हैं। इसके लिए आपको कुछ चरणों का पालन करना पड़ेगा। लेकिन, चरणों को बताने से पहले मैं आपको बताना चाहूँगा कि वेब पृष्ठ में ‘class’ क्या होती है। यह इसलिए भी जरूरी है क्योंकि सब किया धरा इस ‘class’ का ही है। फिर भी अगर आप इसे नहीं जानना चाहते हैं तो आप सीधे iframe से class कैसे हटाएँ? से पोस्ट पढ़ना शुरू कर दें क्योंकि क्लास हटाते ही आपका विडियो मोबाइल पर दिखाई देने लगेगा।
class आखिर होती क्या है?
ब्राउज़र (क्रोम, फायर फॉक्स इत्यादि) पर जो कुछ भी आप देखते हैं वह एक वेब पृष्ठ(webpage) कहलाता है। एक वेब पेज कई हिस्सों में विभाजित होता है। इन हिस्सों को टैग्स के अन्दर रखा जाता है। यह टैग्स वो कोड होते हैं जो ब्राउज़र को दर्शाते हैं कि कोड के साथ क्या करना है।
यह टैग्स अपने आप में आपको एक ऐसा वेबपृष्ठ देते हैं जो कि बहुत साधारण होता है। इस साधारण वेबपृष्ठ को खूबसूरत बनाने के लिए जो कोड लिखा जाता है उसे सी एस एस (css) कहते हैं। इस सी एस एस के माध्यम से आप ब्राउज़र को यह बता सकते हैं कि एक टैग को किस तरह दिखना चाहिए यानी उसका रंग कैसा होना चाहिए, उसकी लम्बाई और चौड़ाई कितनी होनी चाहिए इत्यादि।
यहाँ तक तो काम आसान है लेकिन फिर एक वेबसाइट में काफी सारे पृष्ठ होते हैं और इन पृष्ठों में कई टैग्स होते हैं। वहीं हर टैग अलग तरह से दिखे ये भी जरूरी नहीं है। उदाहरण के लिए इस ब्लॉग में जो लिंक हैं वो एक रंग के दिख रहे हैं। अब इस ब्लॉग में न जाने कितने लिंक्स होंगे। इनको ये रंग देने के लिए आप इसे दो तरह से कर सकते हैं।
पहला कि आप हर लिंक पर जायें और उसका रंग उधर लिख दें। लेकिन इससे दिक्कत ये है कि आपको हर लिंक के टैग पर यह करना होगा और बाद में अगर आपको लिंक्स का रंग बदलना हो तो यह मेहनत दोबारा करनी होगी।
ऐसे में समझदार तरीका यह होता है कि आप ऐसी तकनीक लगायें जिससे आप एक ही जगह बदलाव करें और सारे लिंक एक रंग के हो जाएँ। यह कार्य लिंक को क्लास देकर किया जाता है। असल में आप लिंक को एक क्लास दे देते हैं और फिर उस क्लास में रंगों की जानकारी भर देते हैं। अब जब भी आपको लिंक्स का रंग बदलना हो तो आपको लिंक्स को छेड़ने की जरूरत नहीं है, बस क्लास वाले कोड में बदलने की जरूरत है और ब्राउज़र जहाँ भी उस क्लास का लिंक देखेगा वह बदलाव कर देगा। है न आसान काम? यहाँ ये समझना भी जरूरी है कि भले ही मैंने लिंक का उदाहरण दिया है लेकिन यह क्लास किसी भी टैग को दी जा सकती है।
मेरा यहाँ ये सब बताने का कारण यह था कि मेरे साथ जो प्रॉब्लम आई उसके लिए यह क्लास ही जिम्मेदार है। अब आप पूछेंगे कि कैसे?
तो वह कुछ इस तरह कि जब युट्यूब का विडियो हम पृष्ठ में एम्बेड करते हैं तो यह कार्य एक टैग से होता है। अब गूगल वालों ने इस टैग को एक क्लास दे रखी है। और इसी क्लास के कारण यह विडियो मोबाइल में नहीं दिख रहा है। अब आपको अगर इस परेशानी से निजात पाना है तो आपको इस क्लास को हटाना पड़ेगा। आप जैसे ही इसे हटायेंगे आपका विडियो मोबाइल में दिखने लगेगा।
iframe से क्लास कैसे हटायें?
अब आपके मन में प्रश्न आ रहा होगा कि iframe टैग से क्लास कैसे हटाया जाए? तो यह काम निम्न चरणों को पूरा करके किया जा सकता है:
1. सबसे पहले html व्यू पर जाएँ। आपके ब्लॉग के डैशबोर्ड पर सबसे बायें तरफ एक कलम का निशान बना होगा। इस निशान को आप क्लिक करेंगे तो एक पॉपअप खुलेगा। इस पॉपअप में आपको दो विकल्प दिखेंगे। आपको html view पर क्लिक करना है। क्लिक करते ही आप html व्यू में पहुँच जायेंगे।
पेंसिल पर क्लिक करें |
html view को चुने |
2. जब आप ब्लॉग का html view खोलेंगे तो आपको कोड दिखाई देगा। आप अब ctrl + f दबाएँ। ctrl और f की एक साथ दबाते ही ब्राउज़र पर सर्च बॉक्स खुलेगा। अब इस बॉक्स में <iframe लिखें और एंटर मारें। आई फ्रेम ही वह टैग है जिसके कारण यूट्यूब का विडियो आपके ब्लॉग पृष्ठ पर दिखता है। इसी टैग में आपको अब बदलाव करने हैं।
ctrl + f दबाते ही सर्च बॉक्स खुल जायेगा |
सर्च बॉक्स में <iframe लिखेंगे तो आपको iframe टैग दिख जायेगा |
3. iframe टैग कुछ ऐसा सा दिखता है:
<iframe allowfullscreen=”” class=”BLOG_video_class” height=”266″ src=”https://www.youtube.com/embed/VHTplohu4AA” width=”320″ youtube-src-id=”VHTplohu4AA”></iframe>
अब आप देख रहे होंगे कि इसमें class=”BLOG_video_class” लिखा है। यही क्लास आपके विडियो को मोबाइल में नहीं दिखने दे रही हैं। आपको बस ये करना है कि कोड से यह चीज हटा देनी है।
कोड हटाने के बाद iframe टैग कुछ यूँ दिखेगा:
<iframe allowfullscreen=”” height=”266″ src=”https://www.youtube.com/embed/VHTplohu4AA” width=”320″ youtube-src-id=”VHTplohu4AA”></iframe>
4. अब आप राइटिंग मोड में आ जाएँ (दूसरे स्टेप में जैसे html view चुना था वैसे ही आपको दूसरा विकल्प अब चुनना है) और अपनी पोस्ट को सेव कर दें।
5. अब मोबाइल में अपना लिंक खोलें। आपका विडियो दिखने लगेगा।
नीचे मैं एक ही विडियो को दो तरह से दे रहा हूँ। एक में क्लास है और एक में नहीं है। आप देखेंगे जिसमें क्लास है वो मोबाइल स्क्रीन पर नहीं दिखाई दे रहा है लेकिन अगर आप लैपटॉप या कंप्यूटर पर इसे देखेंगे तो विडियो दिखाई देगा।
क्लास नहीं हटाई गयी है
क्लास हटा दी गयी है
तो था न यह आसान? उम्मीद है यह पोस्ट आपको पसंद आई होगी।
हम हर दिन कुछ न कुछ नया सीखते रहते हैं। कुछ दिनों पहले मैंने सीखा था और अब आपने सीख लिया है।
ब्लॉगर से सम्बन्धित मेरी दूसरी पोस्ट्स आप निम्न लिंक पर जाकर पढ़ सकते हैं:
ब्लॉग पर मौजूद तकनीक से जुड़े अन्य पोस्ट आप निम्न लिंक पर जाकर पढ़ सकते हैं:
अगर आपको तकनीक से जुड़ी कोई दिक्कत पेश आती है तो आप मुझे यहाँ पर टिप्पणी के माध्यम से बता सकते हैं या मुझे निम्न मेलआई डी पर मेल कर सकते हैं:
nainwal.vikas@gmail.com
अब इजाजत दीजिये।
© विकास नैनवाल ‘अंजान’
बहुत सुन्दर।
हिन्दी दिवस की अशेष शुभकामनाएँ।
जी, आभार सर…. आपको भी हिन्दी दिवस की हार्दिक शुभकामनाएँ….