जेड-इंडेक्स और आईफ्रेम समस्या - ड्रॉपडाउन मेनू

Question

अरे। मेरे ड्रॉपडाउन मेनू और iframes के साथ एक परेशान मुद्दा होने के कारण।

मैंने ड्रॉपडाउन मेनू में 1000 का जेड-इंडेक्स लागू किया है, हालांकि यूट्यूब वीडियो वाला आईफ़्रेम अभी भी मेनू के ऊपर दिखाई देता है। अपने आप को नीचे के लिए देखें ('शॉर्टकोड' मेनू की जाँच):

http://www.matthewruddy.com/demo/?page_id=765

मैं समझ नहीं क्यों यह है। क्या कोई मेरी मदद कर सकता है? यहाँ सीएसएस है अगर यह मदद करता है:

#jquery-dropdown { 
position: absolute; 
bottom: 0; 
right: 10px; 
} 

#jquery-dropdown ul { 
margin: 0; 
padding: 0; 
list-style: none; 
} 

#jquery-dropdown ul li { 
margin: 0; 
padding: 15px 10px 15px 10px; 
position: relative; 
float: left; 
} 

#jquery-dropdown ul li a { 
display: block; 
text-decoration: none; 
font-weight: bold; 
font-size: 13px; 
color: #707070; 
outline: none; 
} 

#jquery-dropdown ul li ul { 
position: absolute; 
left: -10px; 
top: 46px; 
display: none; 
background: #f4f4f4; 
border: 1px solid #e1e1e1; 
border-top: none; 
z-index: 1000; 
padding: 5px 0; 
-moz-box-shadow: 1px 2px 3px #a4a4a4; 
-webkit-box-shadow: 1px 2px 3px #a4a4a4; 
box-shadow: 1px 2px 3px #a4a4a4; 
} 

#jquery-dropdown ul li ul li { 
margin: 0; 
padding: 0; 
float: none; 
position: relative; 
z-index: 1000; 
} 

#jquery-dropdown ul li ul li a { 
width: 180px; 
padding: 10px; 
z-index: 1000; 
} 

#jquery-dropdown ul li ul li a:hover { 
background: #e0e0e0; 
} 

Answer 1

मैं <object> टैग का उपयोग और नहीं Iframe यूट्यूब वीडियो की एम्बेडिंग का प्रयोग करेंगे पर यहाँ। फिर, मैं <object> के अंदर <param name="wmode" value="transparent"> का उपयोग करूंगा। कुछ इस तरह:

<object width="640" height="385"><param name="wmode" value="transparent"></param><param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object> 

Here is some more info

Answer 2

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

सिल्वरलाइट प्लगइन में इसकी अपनी मूल विंडो की बजाय ब्राउज़र सामग्री विंडो में चलाने के लिए एक सेटिंग है। आप एम्बेडेड यूट्यूब प्लेयर के लिए एक समान सेटिंग खोजने का प्रयास कर सकते हैं।

Answer 3

फ्लैश हमेशा सभी ब्राउज़रों पर जेड-इंडेक्स के साथ अच्छा नहीं खेलता है, मेरे फ़ायरफ़ॉक्स से ठीक दिखता है। http://manisheriar.com/blog/flash_objects_and_z_index < < मुझे लगता है कि यह वह समाधान हो सकता है जिसे आप ढूंढ रहे हैं।

संपादित

Why doesn't Z-Index in IE render the way it's supposed to over a Flash Movie? < < समान मुद्दा stackoverflow

Answer 4

आप यूट्यूब vids एम्बेड करने के iframe विधि का उपयोग कर रखना चाहते हैं, तो आप बस क्वेरी चर ?wmode=transparent के माध्यम से सेट कर सकते हैं wmode। यहाँ एक उदाहरण है:

<iframe width="580" height="435" src="http://www.youtube.com/embed/fCH7B9m4A4M" frameborder="0" allowfullscreen></iframe> 

बन गयी:

<iframe width="580" height="435" src="http://www.youtube.com/embed/fCH7B9m4A4M?wmode=transparent" frameborder="0" allowfullscreen></iframe> 

किसी भी प्रश्न चर पहले से ही मौजूद के लिए यूट्यूब URL की जाँच करना न भूलें। यदि पहले से ही ?something...?wmode=transparent से &wmode=transparent पर बदलें और अंत में इसे टालें।

Answer 5

यदि? Wmode = पारदर्शी काम नहीं करता है, तो इसके बजाय अपारदर्शी पर स्विच करने का प्रयास करें। यह मेरे मामले में काम किया।

नमूना:?

(function ($) { 
    $ = jQuery; 

    $(function() { 
     $video = $("#SomeWrapper> iframe"); 
     $srcVal = $video.attr('src'); 
     appendedVal = $srcVal + "?wmode=opaque"; 
     $video.attr('src',appendedVal); 
    }); 
})(jQuery); 

Answer 6

एक iframe मुद्दा नहीं z- इंडेक्स .Same मुद्दा मैं मैं सिर्फ जोड़ने का सामना करना पड़ा है कि wmode = यूट्यूब के लिए पारदर्शी मैं src यूआरएल फ्रेम एम्बेड। इस तरह:

<div class="tube_box"> 
      <iframe width="500" height="300" src="https://www.youtube.com/embed/ngKxlkoZBLA**?wmode=transparent**" frameborder="0" allowfullscreen ></iframe> 
    </div> 

It Works in all browser IE,Firefox and chrome 

Here My Css : 


.tube_box{ 
    float:left; 
    width:515px; 
    border:5px groove #d1e7ed; 
    border-radius:11px; 
    margin-bottom:10px; 
    color:#b8b8bf; 
    padding:10px; 
    z-index: 1000 ; 

} 


If you add the position:relative,absolute or anything again the drop down hiding.So avoid position its better.Another thing is not important to add the z-index,Without z-index also it will work .Hope so it will really helpful for you