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?
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>
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
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ć.
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.
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.
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