दिलचस्प पोस्ट
एंड्रॉइड अद्यतन 17 बाह्य जार के साथ असंगत लगता है WPF TextBlock तत्व और लेबल नियंत्रण के बीच अंतर क्या है? एक शब्दकोश को लागू करने के लिए सर्वोत्तम डेटा संरचना? क्या इंस्टॉलेशन कॉल करने से पहले रिक्त चेक की आवश्यकता है? नेस्टेड राज्यों या यूआई-राउटर में बाएं बार के साथ लेआउट के विचार? एसक्यूएल चयन की हालिया तारीख से पंक्तियाँ ऑप्टिमाइज़ पोस्टग्रेस टाइमस्टैम्प क्वेरी श्रेणी क्या नियमित अभिव्यक्ति कभी नहीं मेल कर सकते हैं? जावास्क्रिप्ट और बैकस्लैश बदलते हैं ActionController :: Base.relative_url_root के लिए प्रतिस्थापन क्या है? एएसपी.नेट में सीएसएस वर्गों के बारे में उपयोगकर्ता नियंत्रण कैसे जानें सीएसएस 3 पैमाने के आसपास सफेद जगह Setuptools setup.py फ़ाइल में install_requires के लिए संदर्भ requirements.txt? एक आईओएस ऐप में iMessage स्टाइल रीसिंगिंग कीबोर्ड Struts2 गुजरना चर का केस

यूट्यूब वीडियो iframe के माध्यम से एंबेडेड है, z-index की उपेक्षा करना?

मैं क्षैतिज बहुस्तर ड्रॉपडाउन नेविगेशन मेनू को लागू करने की कोशिश कर रहा हूं। तुरंत नीचे (खड़ी) मेनू, मुझे एक यूट्यूब वीडियो आइफ्रेम के माध्यम से एम्बेडेड मिला है। अगर मैं फ़ायरफ़ॉक्स में एक मुख्य स्तर के एनएवी आइटमों पर हॉवर करता हूं, तो ड्रॉपडाउन मेनू ठीक से वीडियो के ऊपर दिखाई देता है।

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

यह समस्या यूट्यूब वीडियो से संबंधित है, कि iframe परीक्षण करने के लिए, मैं वीडियो के बजाय किसी अन्य वेब साइट पर iframe का लक्ष्य रखता हूं, और ड्रॉपडाउन मेनू ठीक भी काम करता है, यहां तक ​​कि IE में।

  • प्रश्न 1: डब्ल्यूटीएफ?
  • प्रश्न 2: क्यों, भले ही मैं z-index:-999 !important; लगाया हो z-index:-999 !important; iframe पर यह समस्या अभी भी होती है?

क्या कुछ आंतरिक सीएसएस है जो यूट्यूब एंबेड कोड में शामिल है जो कि किसी तरह कुछ ओवरराइडिंग चीजें हैं?

Solutions Collecting From Web of "यूट्यूब वीडियो iframe के माध्यम से एंबेडेड है, z-index की उपेक्षा करना?"

Wmode को जोड़ने का प्रयास करें, इसमें दो पैरामीटर हैं

 &wmode=Opaque &wmode=transparent 

मुझे कोई तकनीकी कारण नहीं मिल रहा है, क्यों यह काम करता है, या अधिक स्पष्टीकरण, लेकिन इस प्रश्न को देखो ।

 <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque"> 

या यह

 //Fix z-index youtube video embedding $(document).ready(function (){ $('iframe').each(function(){ var url = $(this).attr("src"); $(this).attr("src",url+"?wmode=transparent"); }); }); 

जोश का जवाब सही रास्ते पर था, लेकिन मुझे पता चला कि यह पूरी तरह से ?rel=0 क्विकस्ट्रिंग " को हटा देता है और इसे ?wmode=transparent item" के साथ बदल देता है – जिसमें YouTube सुझाई गई वीडियो सूची को प्रदर्शित करने का असर होता है प्लेबैक, भले ही आप मूल रूप से ऐसा नहीं करना चाहते थे

मैंने कोड को बदल दिया है ताकि एम्बेडेड वीडियो के src विशेषता को पहले स्कैन किया जाए, यह देखने के लिए कि क्या कोई प्रश्न चिह्न है ? इसमें पहले से ही (क्योंकि यह एक पूर्व-मौजूद क्वेरी स्ट्रिंग की उपस्थिति को दर्शाता है, जो कि कुछ हो सकता है ?rel=0 लेकिन सिद्धांत कुछ भी हो सकता है जो YouTube भविष्य में संलग्न करना चुनता है)। यदि वहां पहले से ही एक क्वेरी स्ट्रिंग है, तो हम इसे संरक्षित करना चाहते हैं, इसे नष्ट नहीं करना है, क्योंकि यह इस यूट्यूब वीडियो में जो भी चिपकाए गए द्वारा चुनी गई किसी सेटिंग का प्रतिनिधित्व करता है, और संभवत: उसे किसी कारण के लिए चुना गया है!

तो, अगर ? पाया जाता है, wmode=transparent को पहले से मौजूद क्वेरी स्ट्रिंग के अंत में टैग करने के लिए प्रारूप: &mode=transparent का उपयोग करके जोड़ा जाएगा।

अगर नहीं ? पाया जाता है, तो कोड बिल्कुल उसी तरीके से काम करेगा जैसे मूल रूप से ( toomanyairmiles के पद में), यूआरएल के लिए एक नई क्वेरी स्ट्रिंग के रूप में ?wmode=transparent

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

आपके document.ready में ड्रॉप करने के लिए यहां कोड है। फ़ंक्शन:

 $('iframe').each(function() { var url = $(this).attr("src"); if (url.indexOf("?") > 0) { $(this).attr({ "src" : url + "&wmode=transparent", "wmode" : "opaque" }); } else { $(this).attr({ "src" : url + "?wmode=transparent", "wmode" : "opaque" }); } }); 

बस इन दो में से एक को src url में जोड़ें:

 &wmode=Opaque &wmode=transparent <iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe> 

मैं यूट्यूब iframe पर एक ही समस्या है हालांकि इंटरनेट एक्सप्लोरर में ही एम्बेड करता है

ज़ेड-इंडेक्स को पूरी तरह से नजरअंदाज किया जा रहा था, या फ़्लैश वीडियो सिर्फ सबसे ज्यादा संभव सूचकांक पर दिख रहा था।

यह मैंने जो प्रयोग किया था, ऊपर की जेपी स्क्रिप्ट को थोड़ा सा आदतन करना था।

मेरा एम्बेड कोड, यूट्यूब से सीधे …

 <iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe> 

ऊपर उल्लेखित उत्तर से jQuery का मामूली रूप …

 $('iframe').each( function() { var url = $(this).attr("src") $(this).attr({ "src" : url.replace('?rel=0', '')+"?wmode=transparent", "wmode" : "Opaque" }) }); 

असल में यदि आप अपनी एम्बेड सेटिंग्स में वीडियो समाप्त होने पर सुझाए गए वीडियो नहीं दिखाते हैं, तो आपके पास ?rel=0 "src" आपके "src" url के अंत में है तो मैंने मामले को बदलने के लिए बिट जोड़ दिया है ?rel=0 मौजूद है अन्यथा ?wmode=transparent काम नहीं करेगा

हम यूट्यूब यूआरएल के अंत में बस ?wmode=transparent जोड़ सकते हैं। यह यूट्यूब को वीडियो को wmode सेट के साथ शामिल करने के लिए कह देगा। तो आप नए एंबेड कोड इस तरह दिखेंगे: –

 <iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen> 

केवल यह एक मेरे लिए काम किया है:

 <script type="text/javascript"> var frames = document.getElementsByTagName("iframe"); for (var i = 0; i < frames.length; i++) { src = frames[i].src; if (src.indexOf('embed') != -1) { if (src.indexOf('?') != -1) { frames[i].src += "&wmode=transparent"; } else { frames[i].src += "?wmode=transparent"; } } } </script> 

मैं इसे footer.php WordPress फ़ाइल में लोड कर रहा हूँ। कोड यहां टिप्पणी में मिला (धन्यवाद गैर्सन)

मेरी क्वेरी स्ट्रिंग की शुरुआत में wmode = Opaque या पारदर्शी कुछ भी हल नहीं किया। मेरे लिए यह समस्या केवल क्रोम पर होती है, और यहां तक ​​कि सभी कंप्यूटरों में भी नहीं। बस एक सीपीयू यह Vimeo में भी उतना ही एम्बेड होता है, और संभवतः अन्य।

मैं बूटस्ट्रैप मोडल्स के 'दिखाए गए' और 'छिपी' ईवेंट को संलग्न करने का मेरा समाधान का उपयोग कर रहा हूं, एक वर्ग जोड़ता है जो आईफ़्रेम को 1×1 पिक्सेल पर सेट करता है, और जब मॉडल बंद होता है तो क्लास को हटा दें। ऐसा लगता है जैसे काम करता है और लागू करने के लिए सरल है

जवाब मेरे लिए वास्तव में काम नहीं करते थे, मेरे पास रैपर पर एक क्लिक इवेंट था और अर्थात 7,8 9, 10 जेड इंडेक्स को नजरअंदाज कर दिया, इसलिए मेरा फिक्स आवरण एक पृष्ठभूमि रंग दे रहा था और यह अचानक काम किया । यद्यपि यह पारदर्शी होने का अनुमान था, इसलिए मैंने आवरण को पृष्ठभूमि रंग के रंग के साथ परिभाषित किया, और फिर अस्पष्टता 0.01, और अब यह काम करता है। मेरे ऊपर कार्य भी है, इसलिए यह एक संयोजन हो सकता है।

मुझे नहीं मालूम है कि यह काम क्यों करता है, बस यह खुश करता है

बिग जाको के जावास्क्रिप्ट कोड ने मेरे लिए काम किया, लेकिन मेरे मामले में मुझे पहले कुछ जेक्यू "नॉकिंफ्लिक्ट" कोड जोड़ना पड़ा। यहां संशोधित संस्करण है जो मेरी साइट पर काम करता है:

 <script type="text/javascript"> var $j = jQuery.noConflict(); jQuery(document).ready(function($j){ $j('iframe').each(function() { var url = $j(this).attr("src"); if ($j(this).attr("src").indexOf("?") > 0) { $j(this).attr({ "src" : url + "&wmode=transparent", "wmode" : "Opaque" }); } else { $j(this).attr({ "src" : url + "?wmode=transparent", "wmode" : "Opaque" }); } }); }); </script> 

Iframe पर आपको सभी की आवश्यकता है:

 ...wmode="opaque"></iframe> 

और यूआरएल में:

 http://www.youtube.com/embed/123?wmode=transparent