यूट्यूब वीडियो एम्बेड और जेड-इंडेक्स समस्याएं

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

प्रश्न 1: क्रोम और IE9 में YouTube वीडियो के पीछे ड्रॉपडाउन मेनू क्यों दिखाई दे रहा है?

यह समस्या यूट्यूब वीडियो से संबंधित है, आईफ्रेम से नहीं। YouTube एम्बेड में आंतरिक CSS शामिल है जो आपके z-index मानों सहित अन्य CSS सेटिंग्स को ओवरराइड करता है।

प्रश्न 2: z-index:-999 सेट करना क्यों महत्वपूर्ण है; आईफ्रेम पर अभी भी समस्या उत्पन्न हो रही है?

यूट्यूब एम्बेड कोड में ओवरराइडिंग सीएसएस आपके द्वारा आईफ्रेम पर लागू होने वाली किसी भी जेड-इंडेक्स सेटिंग्स पर प्राथमिकता लेता है।

समाधान:

इस समस्या को ठीक करने के लिए, एम्बेडेड वीडियो के यूआरएल में निम्नलिखित पैरामीटर जोड़ें:

&wmode=Opaque

यह सेटिंग वीडियो को पृष्ठभूमि में मिश्रित करने की अनुमति देती है, पृष्ठ पर अन्य तत्वों को उसके शीर्ष पर प्रदर्शित होने की अनुमति देना। हालाँकि इसके परिणामस्वरूप कुछ ब्राउज़रों पर पारदर्शिता संबंधी समस्याएँ हो सकती हैं।

वैकल्पिक रूप से, आप लोड होने से पहले अपने पेज पर सभी आईफ्रेम के यूआरएल को संशोधित करने के लिए jQuery का उपयोग कर सकते हैं, जैसा कि नीचे दिए गए कोड स्निपेट में दिखाया गया है: