overlay opaque div over youtube iframe

Jak mogę nałożyć div z półprzezroczystym kryciem na osadzony film z 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;
}

Edit (Dodano więcej wyjaśnień): HTML5 zbliża się do nas, z coraz więcej urządzeń, które używają go zamiast flash, co komplikuje osadzanie filmów z youtube, na szczęście youtube zapewnia specjalny wbudowywalny iFrame z Obsługuje wszystkie problemy z osadzaniem wideo kompatybilność, ale teraz wcześniej metoda pracy nakładania wideo obiekt z półprzezroczystym div nie jest już ważny, nie mogę teraz dodać <param name="wmode" value="transparent"> do obiektu, ponieważ jest to teraz ramka iFrame, więc jak dodać nieprzezroczysty div na osadzonym filmie iframe?

Author: Mp de la Vega, 2010-09-29
Source

5 answers

Informacje z oficjalnej strony Adobe na temat tego problemu

Problem polega na osadzeniu linku do youtube: 

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

W ramce iFrame, domyślne wmode jest windowed, co zasadniczo daje mu Indeks z większy niż Wszystko inne i będzie nakładać się na wszystko.

Spróbuj dodać parametr GET do swojego adresu URL:

Wmode=opaque

Like so: 

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

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

W znaczniku 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>
 211
Author: anataliocs,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-30 17:55:31

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
 15
Author: Mike,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-01 22:11:15

Hmm... co się zmieniło tym razem? http://jsfiddle.net/fdsaP/2/

Renderuje w Chrome w porządku. Czy potrzebujesz go w przeglądarce? To naprawdę pomaga być dokładnym.

EDIT : Youtube renderuje object i embed bez jawnego zestawu wmode, co oznacza, że domyślnie jest to "okno", co oznacza, że nakłada Wszystko. Musisz albo:


A) Hostuj stronę, która zawiera obiekt / kod osadzony samodzielnie i dodaj wmode= "transparent" param element do obiektu i atrybut do osadzenia, jeśli zdecydujesz się służyć obu elementów

B) znaleźć sposób na youtube, aby je określić.


 10
Author: meder omuraliev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-17 19:31:39

Spędziłem dzień na grzebaniu w CSS, zanim znalazłem cynk anataliocsa. Dodaj wmode=transparent jako 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>

To pozwala ramce if dziedziczyć indeks Z swojego kontenera, aby nieprzezroczysta <div> znajdowała się przed ramką iframe.

 2
Author: user605723,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-13 20:19:25

Czy nieprzezroczysta nakładka służy celom estetycznym?

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, że może być fizycznie nieprzezroczysta. Oczywiście będzie to działać tylko w dobrych przeglądarkach.

 0
Author: Chris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-09-29 09:48:19