YouTube वीडियो iframe के माध्यम से एंबेडेड z- इंडेक्स?

Question

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

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

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

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

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

Comments

क्या आप लिंक पोस्ट कर सकते हैं - बिना कोड के मददगार प्रतिक्रिया देना मुश्किल है।

— toomanyairmiles

z- सूचकांक और iFrames

— Stephanfriedrich

IE <9 में सीएसएस ड्रॉप डाउन मेनू को कवर करने वाली YouTube वीडियो सामग्री के

— Sampson

किसी के लिए यह सोचकर कि यह 2015 में कैसे काम करता है, यह <embed wmode="transparent" ...>अनुभाग आपको सभी की आवश्यकता है (कम से कम फ़ायरफ़ॉक्स में) और कोई ज़रूरत नहीं है wmode को url's params या iframes में सेट करने के बारे में

— RozzA

ध्यान रखें कि किसी कारण से यूट्यूब लिंक के दो अलग-अलग प्रकार हैं: youtube.com/v/video_id और youtube.com/embed/video_id । वी-लिंक IE में z-index को अनदेखा करता है, लेकिन एम्बेड ठीक काम करता है।

— एंटोन लिहिन

Answer 1

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");
    });
});

Comments

(मैं ओपी हूँ) सभी को धन्यवाद! मैं manisheriar.com/blog/flash_objects_and_z_index पर एक समान समाधान पर ठोकर खाई है कि कुंजी दोनों <name = "wmode" मान = "पारदर्शी" का उपयोग कर रहा है <<> पर और wmode = "पारदर्शी" <एम्बेड> पर। जैसा कि मुझे संदेह था, यह एक iframe मुद्दा नहीं है। जब तक आप इसे पारदर्शी होने के लिए मजबूर नहीं करते, तब तक यह सबसे अधिक z-index वाली फ्लैश की मांग (मांग) है।

— user249493

यदि आप iframe JS API का उपयोग कर रहे हैं तो एक खिलाड़ी वीवर wmodeभी काम करता है, हालांकि यह प्रलेखित नहीं है।

— रिचर्ड एम।

मैंने इसे एकीकृत किया है और मेरे फैंसीबॉक्स stil does not काम में i7 / 8 और मैं अभी भी शीर्ष पर वीडियो प्राप्त करता हूं। encompasscu.com.au/homeiswheretheheartis मैं क्या कर सकते हैं

— दान

Wmode = पारदर्शी विकल्प ने मेरे लिए एक आकर्षण की तरह काम किया। मैं केवल यही चाहता हूं कि मैं पूछने के लिए सही प्रश्न ढूंढने में तेज था। 24 घंटे बाद मैंने देखना शुरू किया तो मुझे यह उत्तर मिला। ऊपर दिए गए प्रश्न का उत्तर देने और पोस्ट करने के लिए धन्यवाद!

— djmarquette

@ देखें, मेरा संपादन देखें ... आपके youtube एम्बेड कोड में पहले से ही एक क्वेरी स्ट्रिंग हो सकती है। (जैसे? rel = 0 प्रासंगिक वीडियो नहीं दिखाने के लिए)। अगर ऐसा है तो उपयोग करें और wmode = पारदर्शी (या अपारदर्शी - मैंने सुना है कि अपारदर्शी कम सिस्टम संसाधनों का उपयोग करता है, इसलिए मैं मुख्य रूप से इसका उपयोग करता हूं, जब तक कि मेरे पास इसे पारदर्शी बनाने का कोई कारण न हो)।

— सीन केंडल

Answer 2

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

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

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

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

अब, YouTube URL के अंत में पहले से ही क्वेरी स्ट्रिंग के रूप में क्या हो सकता है या नहीं हो सकता है, यह संरक्षित हो जाता है, और आवश्यक 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"
    });
  }
});

Comments

यह मेरे लिए काम किया, जबकि स्वीकृत उत्तर नहीं था (कोड फिक्स करने के बाद भी)। ड्रॉप-इन फिक्स के लिए धन्यवाद।

— टॉम

? पैरामीटर क्वेरी स्ट्रिंग शुरू करता है, और सीमांकक है। मूल सामान। देखें stackoverflow.com/questions/2667551/…

— cdonner

यह मेरी समस्या 10 सेकंड देने से पहले तय हो गई!

— मालिबुर

उत्तम! मैं इस उम्र के लिए देख रहा था!

— जेरोइन डब्ल्यू

यह opaqueनहीं है Opaque(मामले पर ध्यान दें)

— सिजोन टोडा

Answer 3

बस इन दोनों में से एक को 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>

Answer 4

मुझे YouTube पर समान समस्या है iframe केवल इंटरनेट एक्सप्लोरर में एम्बेड करता है।

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

यह वही है जो मैंने इस्तेमाल किया था, उपरोक्त jquery स्क्रिप्ट को थोड़ा सा ढाल दिया।

मेरा एम्बेड कोड, YouTube से सीधे ...

<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"url के अंत में है । इसलिए मैंने केस में ?rel=0मौजूद बिट को रिप्लेस कर दिया है। अन्यथा ?wmode=transparentकाम नहीं करेगा।

Answer 5

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

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

Comments

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

— शैडो विजार्ड ईआर फॉर यू

Answer 6

केवल इसने मेरे लिए काम किया:

<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 फ़ाइल में लोड। यहाँ टिप्पणी में पाया कोड (धन्यवाद Gerson)

Answer 7

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

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

Answer 8

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

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

Answer 9

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

<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>

Answer 10

आप सभी को iframe पर जरूरत है:

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

और URL में:

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