ओवरले अपार्विक यूट्यूब पर iframe div

110

मैं एक यूट्यूब iframe एम्बेडेड वीडियो पर अर्ध-पारदर्शी अस्पष्टता के साथ एक div ओवरले कैसे कर सकता हूं?

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>

सीएसएस

#overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;
}

संपादित करें (अधिक स्पष्टीकरण जोड़ा गया): HTML5 हमसे संपर्क कर रहा है, अधिक से अधिक उपकरणों के साथ, जो फ्लैश के बजाय इसका उपयोग करते हैं, जो यूट्यूब वीडियो के एम्बेडिंग को जटिल करता है, शुक्र है कि यूट्यूब एक विशेष एम्बेड करने योग्य iFrame प्रदान करता है जिसमें सभी वीडियो एम्बेडिंग संगतता मुद्दों को संभालता है, लेकिन अब एक अर्ध-पारदर्शी div के साथ एक वीडियो ऑब्जेक्ट को ओवरले करने की पूर्व कार्य विधि अब मान्य नहीं है, मैं अब <param name="wmode" value="transparent">ऑब्जेक्ट में एक जोड़ नहीं पा रहा हूं , क्योंकि यह अब एक iFrame है, तो मैं कैसे एक अपारदर्शी div जोड़ दूं शीर्ष पर iframe एम्बेडेड वीडियो?

— टिमो हुओवेनन
स्रोत

1

ऐसा लगता है कि YouTube ने समस्या को पूरी तरह से ठीक कर दिया है।

— तैमू हुओवेन

1

मैं अभी भी क्रोम में समस्या देख सकता हूं।

— scribu

@ Scribu यह फ्लैश सुरक्षा मुद्दे हो सकता है या मुझे कुछ याद आ रहा है, मैंने एक स्थानीय सर्वर पर परीक्षण किया।

— टिमो हुओवेंन

शायद। वैसे भी, anataliocs समाधान मेरे लिए काम किया।

— स्क्रिबु

क्या आप इस प्रश्न में youtube टैग जोड़ सकते हैं?

— एनाटिक्लस

210

इस मुद्दे के बारे में आधिकारिक एडोब साइट से जानकारी

समस्या यह है कि जब आप एक youtube लिंक एम्बेड करते हैं:

https://www.youtube.com/embed/kRvL6K8SEgY

एक iFrame में, डिफॉल्ट wmode को विंडो किया जाता है जो अनिवार्य रूप से इसे एक z- इंडेक्स देता है फिर बाकी सब कुछ और यह किसी भी चीज पर ओवरले करेगा।

इस GET पैरामीटर को अपने URL पर लागू करने का प्रयास करें:

wmode = अपारदर्शी

इस तरह:

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

सुनिश्चित करें कि URL में इसका पहला पैरामीटर है। अन्य मापदंडों के बाद जाना चाहिए

आइफ्रेम टैग में:

उदाहरण:

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

— anataliocs
स्रोत

1

सूचना एडोब समस्या के बारे में: http://kb2.adobe.com/cps/155/tn_15523.html । सिर्फ रिकार्ड के लिए।

— वॉस्क

15

ध्यान दें कि wmode = पारदर्शी फिक्स केवल तभी काम करता है जब यह पहली बार हो

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

नहीं

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent

— माइक
स्रोत

11

~~हम्म ... इस बार क्या अलग है? http://jsfiddle.net/fdsaP/2/~~

क्रोम में रेंडर ठीक। क्या आपको इसे क्रॉस-ब्राउज़र की आवश्यकता है? यह वास्तव में विशिष्ट होने में मदद करता है।

संपादित करें : Youtube किसी भी स्पष्ट wmode सेट के साथ objectऔर embedइसका प्रतिपादन करता है, जिसका अर्थ है कि यह "विंडो" के लिए डिफ़ॉल्ट है जिसका अर्थ है कि यह सब कुछ ओवरले करता है । आपको या तो चाहिए:

a) उस पृष्ठ को होस्ट करें जिसमें ऑब्जेक्ट / एम्बेड कोड स्वयं है और wmode = "पारदर्शी" परम तत्व को ऑब्जेक्ट में जोड़ें और एम्बेड करने के लिए विशेषता दें यदि आप दोनों तत्वों की सेवा करना चाहते हैं

ख) उन लोगों को निर्दिष्ट करने के लिए यूट्यूब के लिए एक रास्ता खोजें।

— पदक जीतने वाला
स्रोत

हाँ, मुझे पता चला कि समस्या क्या थी, फ़ायरफ़ॉक्स और क्रोम में यह सामान्य पृष्ठभूमि के साथ काम करता है, अपारदर्शिता को जोड़ने से यह चमकता है ... आपका भी चमकता है।

— टिमो हुओवेनेन

जिस तरह से मेरा दिखता है, देखने के लिए आइफ्रेम उदाहरण को संपादित किया। jsfiddle.net/fdsaP/6

— टिमो हुओवेंन

तो ... आप चाहते हैं कि opr को वस्तु / एम्बेड तत्व के अंदर iframe के लिए लागू किया जाए?

— औसतन

हां, मैंने यह नहीं देखा कि आइफ्रेम ओवरलेड था क्योंकि मेरे लिए ऑब्जेक्ट पूरे आईफ्रेम को कवर कर रहा है, मुझे इसकी आवश्यकता होने पर वीडियो को कवर करने की आवश्यकता है, अन्यथा बीमार इसे उसी चौड़ाई / ऊंचाई और स्थिति के काले div के साथ बदलते हैं।

— टिमो हुओवेंन

लिंक और समाधान के लिए @meder धन्यवाद! अभी इसे

— आज़माएंगे

2

मैं एक दिन सीएसएस के साथ खिलवाड़ करने से पहले बिताया जब मैंने एटलिटोस्क टिप पाया। wmode=transparentYouTube URL में एक पैरामीटर के रूप में जोड़ें :

<iframe title=<your frame title goes here> 
    src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"  
    scrolling="no" 
    frameborder="0" 
    width="640" 
    height="390" 
    style="border:none;">
</iframe>

इससे iframe को उसके कंटेनर का z-index विरासत में मिलता है जिससे आपकी opaque <div>iframe के सामने होगी।

— user605723
स्रोत

0

सौंदर्य प्रयोजनों के लिए अपारदर्शी ओवरले है?

यदि ऐसा है, तो आप उपयोग कर सकते हैं:

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

'पॉइंटर-ईवेंट: कोई नहीं' ओवरले व्यवहार को बदल देगा ताकि यह शारीरिक रूप से अपारदर्शी हो सके। बेशक, यह केवल अच्छे ब्राउज़रों में काम करेगा।

— क्रिस
स्रोत

सफारी 4, क्रोम और फ़ायरफ़ॉक्स 3.6 अभी भी क्लिक करता है ??

— टिमो हुओवेंन

1

क्या आप चाहते हैं कि वाट नहीं है?

— कोडबीफ सिप

मैं पूरी तरह से सौंदर्य प्रयोजनों के लिए एक अपारदर्शी पृष्ठभूमि के पीछे youtube एम्बेडेड वीडियो डालने की कोशिश कर रहा हूँ :)

— टिमो Huovinen