Nałóż nieprzezroczysty element div na element iframe YouTube

110

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?

Timo Huovinen
źródło
1
Wygląda na to, że YouTube całkowicie rozwiązał problem.
Timo Huovinen
1
Nadal widzę problem w Chrome.
scribu
@scribu to mogą być problemy z bezpieczeństwem flasha lub czegoś mi brakuje, testowałem na lokalnym serwerze.
Timo Huovinen
Prawdopodobnie. W każdym razie rozwiązanie anatalioców działało na mnie.
scribu
Czy możesz dodać tag youtube do tego pytania?
anataliocs

Odpowiedzi:

210

Informacje z oficjalnej witryny Adobe na temat tego problemu

Problem występuje, gdy osadzasz link do youtube:

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

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:

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

Upewnij się, że jest to pierwszy parametr w adresie URL. Pozostałe parametry muszą iść dalej

W tagu iframe:

Przykład:

<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
źródło
1
Informacje o problemie od firmy Adobe: http://kb2.adobe.com/cps/155/tn_15523.html . Tak dla porządku.
Wacek
15

Zauważ, że poprawka wmode = transparent działa tylko wtedy, gdy jest pierwsza

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

Nie

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent
Mikrofon
źródło
11

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 objecti embedbez 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ć.


meder omuraliev
źródło
Tak, dowiedziałem się, na czym polega problem, w Firefoksie i Chrome działa z normalnym tłem, dodanie krycia sprawia, że ​​prześwituje ... Twoje również prześwituje.
Timo Huovinen,
zmodyfikowałem przykład iframe, aby wyglądał tak, jak wygląda mój. jsfiddle.net/fdsaP/6
Timo Huovinen
Więc ... chcesz, aby krycie było stosowane do obiektu / elementu osadzonego wewnątrz elementu iframe?
meder omuraliev
tak, nie zauważyłem, że iframe został nałożony, ponieważ dla mnie obiekt zakrywa cały iframe, potrzebuję, aby wideo było zakryte, jeśli to możliwe, inaczej źle go zastąp czarną divą o tej samej szerokości / wysokości i pozycji.
Timo Huovinen,
@meder dzięki za link i rozwiązanie! wypróbuje to teraz, ale flash nadal można kliknąć :)
Timo Huovinen
2

Spędziłem dzień, majstrując przy CSS, zanim znalazłem wskazówkę dotyczącą anatalioców. Dodaj wmode=transparentjako parametr do adresu URL 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>

Dzięki temu element iframe może dziedziczyć indeks Z swojego kontenera, aby <div>element nieprzezroczysty znajdował się przed elementem iframe.

user605723
źródło
0

Czy nieprzezroczysta nakładka jest ze względów estetycznych?

Jeśli tak, możesz użyć:

#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” zmieni zachowanie nakładki, tak aby była fizycznie nieprzezroczysta. Oczywiście zadziała to tylko w dobrych przeglądarkach.

Chris
źródło
safari 4, chrome i firefox3.6 nadal klikają?
Timo Huovinen,
1
Czy nie tego chcesz?
Codebeef
Próbuję umieścić osadzone wideo z youtube za nieprzezroczystym tłem dla celów całkowicie estetycznych :)
Timo Huovinen