Jak mogę nałożyć element DIV z półprzezroczystym kryciem na osadzone wideo YouTube iframe?
<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;
}
edytuj (dodano więcej wyjaśnień):
Zbliża się HTML5, a coraz więcej urządzeń używa go zamiast Flasha, co komplikuje osadzanie filmów z YouTube, na szczęście YouTube udostępnia specjalną ramkę iFrame do osadzania, która obsługuje wszystkie problemy ze zgodnością osadzania wideo, ale teraz poprzednio działająca metoda nakładania obiektu wideo na półprzezroczysty element div jest już nieaktualna, nie mogę teraz dodać a <param name="wmode" value="transparent">
do obiektu, ponieważ jest to teraz iFrame, więc jak dodać nieprzezroczysty element div na wierzchu wideo osadzone w ramce iframe?
Odpowiedzi:
Informacje z oficjalnej witryny Adobe na temat tego problemu
Problem występuje, gdy osadzasz link do youtube:
w iFrame domyślny tryb wmode jest okienkowy, co zasadniczo daje mu indeks Z większy niż wszystko inne i nakłada się na wszystko.
Spróbuj dołączyć ten parametr GET do swojego adresu URL:
wmode = nieprzezroczysty
tak jak:
Upewnij się, że jest to pierwszy parametr w adresie URL. Pozostałe parametry muszą iść dalej
W tagu iframe:
Przykład:
źródło
Zauważ, że poprawka wmode = transparent działa tylko wtedy, gdy jest pierwsza
Nie
źródło
Hmm ... co się zmieniło tym razem? http://jsfiddle.net/fdsaP/2/Renderuje w Chrome w porządku. Czy potrzebujesz tego w różnych przeglądarkach? To naprawdę pomaga być konkretnym.EDYCJA : Youtube renderuje
object
iembed
bez wyraźnego ustawienia trybu wmode, co oznacza, że domyślnie jest to „okno”, co oznacza, że nakłada wszystko . Musisz:a) Samodzielnie udostępniaj stronę zawierającą kod obiektu / embed i dodaj element param wmode = "transparent" do obiektu oraz atrybut do osadzenia, jeśli zdecydujesz się obsługiwać oba elementy
b) Znajdź sposób na youtube, aby je określić.
źródło
Spędziłem dzień, majstrując przy CSS, zanim znalazłem wskazówkę dotyczącą anatalioców. Dodaj
wmode=transparent
jako parametr do adresu URL YouTube:Dzięki temu element iframe może dziedziczyć indeks Z swojego kontenera, aby
<div>
element nieprzezroczysty znajdował się przed elementem iframe.źródło
Czy nieprzezroczysta nakładka jest ze względów estetycznych?
Jeśli tak, możesz użyć:
„pointer-events: none” zmieni zachowanie nakładki, tak aby była fizycznie nieprzezroczysta. Oczywiście zadziała to tylko w dobrych przeglądarkach.
źródło