Flashové YouTube video, z-index a wmode

by Zdeněk Večeřa 5 Comments

Pokud na stránku vložíte YouTube video přes iframe, což může být flashový přehrávač, a nějaký prvek (třeba div), kterým chcete daný flash překrýt (absolutní pozicování, z-index třeba 102), můžete mít problém. V různých prohlížečích se to chová různě.

Firefox může flashové video bez problému překrýt, Opera také, ale třeba průhledné části divu překreslí černě. O jednotlivých verzích Internet Exploreru ani nemluvě. A třeba Chrome může flashem překrýt celý div, i když to mělo být naopak.

Nastavit CSS vlastnost z-index obyčejně nepomůže. Naštěstí lze problém jednoduše vyřešit pomocí atributu wmode.

Flashové YouTube video a wmode

Takhle nějak vypadá iframový kód YouTube videa vkládaný do stránky:

<iframe title="YouTube video player" width="560" height="349"
src="https://www.youtube.com/embed/aAWpkZSCMXU"
frameborder="0" allowfullscreen></iframe>

Stačí elegantně přidat parametr wmode=opaque k url adrese, tj. do src atributu:

src="https://www.youtube.com/embed/aAWpkZSCMXU?wmode=opaque"

Podrobnosti o wmode přímo u Adobe.

 

Přečtěte si podobné články:

Comments ( 5 )

  1. Čenda
    Ahoj, vím, že komentuji starší post, ale měl bych jednu otázku. Wmode funguje opravdu parádně, ale potřeboval bych do src ještě vtěsnat rel=0, aby se nezobrazovaly náhledy dalších videí po skončení toho mého videa, ale funguje buď jedno, nebo druhé. Netušíš, co s tím? Díky Čenda
  2. Zdeněk Veřeřa
    Čendo, normální zřetězení parametrů nefunguje? Mělo by. src="http://www.youtube.com/embed/aAWpkZSCMXU?wmode=opaque&rel=0"
  3. Čenda
    Ahoj Zdeňku, moc děkuji za radu. Když jsem to napsal ve formátu: src=”http://www.youtube.com/embed/aAWpkZSCMXU?wmode=opaque&rel=0″, tak mi to u videa psalo "Uživatel video odstranil", tak mě napadlo to zřetězení prohodit do src="http://www.youtube.com/embed/sXn_Co0H0J8?rel=0&wmode=opaque" a to už funguje. Opravdu moc děkuji za ochotu a radu nad zlato :-) S pozdravem Čenda
  4. Čenda
    Už vím proč mi to psalo, že uživatel video odstranil :-) Prvně jsem totiž zkopíroval Tvůj link, co jsi psal a nedošlo mi, že to je na jiné video na Youtube :-) Tudíž to zřetězení funguje i v opačném pořadí :-) S pozdravem Čenda
  5. Manwe
    Dik, pomohlo :)

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Tato stránka používá Akismet k omezení spamu. Podívejte se, jak vaše data z komentářů zpracováváme..