sovrapponi div opaco sull'iframe di YouTube


110

Come posso sovrapporre un div con opacità semitrasparente su un video incorporato iframe di YouTube?

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

CSS

#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;
}

modifica (aggiunti ulteriori chiarimenti): HTML5 si sta avvicinando a noi, con sempre più dispositivi che lo utilizzano al posto di flash, il che complica l'incorporamento dei video di YouTube, per fortuna YouTube fornisce uno speciale iFrame incorporabile con gestisce tutti i problemi di compatibilità dell'incorporamento video, ma ora il metodo precedentemente funzionante di sovrapporre un oggetto video con un div semitrasparente non è più valido, ora non sono in grado di aggiungere un <param name="wmode" value="transparent">all'oggetto, perché ora è un iFrame, quindi come faccio ad aggiungere un div opaco sopra il video incorporato nell'iframe?


1
Sembra che youtube abbia risolto completamente il problema.
Timo Huovinen

1
Riesco ancora a vedere il problema in Chrome.
scribu

@scribu potrebbero essere problemi di sicurezza flash o mi manca qualcosa, ho testato su un server locale.
Timo Huovinen

Probabilmente. Comunque, la soluzione di anataliocs ha funzionato per me.
scribu

Puoi aggiungere il tag youtube a questa domanda?
anataliocs

Risposte:


210

Informazioni dal sito ufficiale di Adobe su questo problema

Il problema è quando incorpori un link di YouTube:

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

in un iFrame, il wmode predefinito è a finestra che essenzialmente gli dà uno z-index maggiore di tutto il resto e si sovrapporrà a qualsiasi cosa.

Prova ad aggiungere questo parametro GET al tuo URL:

wmode = opaco

così:

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

Assicurati che sia il primo parametro nell'URL. Altri parametri devono andare dopo

Nel tag iframe:

Esempio:

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

1
Informazioni fornite da Adobe sul problema: http://kb2.adobe.com/cps/155/tn_15523.html . Solo per la cronaca.
Wacek

15

Nota che la correzione wmode = transparent funziona solo se è prima così

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

Non

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

11

Hmm ... cosa c'è di diverso questa volta? http://jsfiddle.net/fdsaP/2/

Rende bene in Chrome. Ne hai bisogno cross-browser? Aiuta davvero a essere specifici.

EDIT : Youtube rende il objecte embedsenza alcun wmode esplicito impostato, il che significa che il valore predefinito è "window", il che significa che si sovrappone a tutto . È necessario:


a) Ospita tu stesso la pagina che contiene l'oggetto / codice di incorporamento e aggiungi l'elemento param wmode = "transparent" all'oggetto e l'attributo da incorporare se scegli di pubblicare entrambi gli elementi

b) Trova un modo per YouTube per specificarli.



Sì, ho scoperto qual era il problema, in Firefox e Chrome funziona con sfondi normali, aggiungendo l'opacità lo fa risplendere ... anche il tuo traspare.
Timo Huovinen

ha modificato l'esempio dell'iframe per avere l'aspetto del mio. jsfiddle.net/fdsaP/6
Timo Huovinen

Quindi ... vuoi che l'opacità si applichi all'elemento object / embed all'interno dell'iframe?
meder omuraliev

sì, non ho notato che l'iframe è stato sovrapposto perché per me l'oggetto copre l'intero iframe, ho bisogno che il video sia coperto se possibile, altrimenti lo sostituisco con un div nero della stessa larghezza / altezza e posizione.
Timo Huovinen

@meder grazie per il link e la soluzione! lo proverò subito, ma il flash è comunque
cliccabile

2

Ho passato una giornata a scherzare con i CSS prima di trovare un suggerimento per anataliocs. Aggiungi wmode=transparentcome parametro all'URL di YouTube:

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

Ciò consente all'iframe di ereditare lo z-index del suo contenitore in modo che l'opaco <div>si trovi davanti all'iframe.


0

La copertura opaca è per scopi estetici?

In tal caso, puoi utilizzare:

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

'pointer-events: none' cambierà il comportamento dell'overlay in modo che possa essere fisicamente opaco. Ovviamente questo funzionerà solo con buoni browser.


Safari 4, Chrome e Firefox3.6 fanno ancora clic?
Timo Huovinen

1
Non è quello che vuoi?
Codebeef

Sto cercando di mettere il video incorporato di YouTube dietro uno sfondo opaco per scopi completamente estetici :)
Timo Huovinen
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.