Tutorialdock | Free Web Resources

YouTube iFrame: l’Embed copre menù e altri layer

| di:

youtube logo profile YouTube iFrame: lEmbed copre menù e altri layer

Utilizzando il “nuovo” codice di embed di Youtube con iFrame, può capitare che incorporando il video sul proprio sito web questo rimanga in primo piano e, durante lo scorrimento, vada ad oscurare la barra del menù fissa in alto oppure copra altri layer.

iFrame fuori controllo anche usando “z-index

Il parametro z-index comunica al browser la posizione di un div o, in questo caso, di un iFrame. Se il nostro video di Youtube, appena incorporato, copre parzialmente il menù o un altro layer questo significa che il valore z-index del player è superiore a quella della nostra barra di navigazione.

Provare a risolvere aumentando lo z-index dei nostri div è inutile perché il valore impostato da Youtube per il suo player è molto più elevato.

Risolvere il problema “z-index” del player di Youtube

Attualmente Youtube fornisce un parametro da “aggiungere” all’url del video incorporato per rendere trasparente il player e posizionarlo più sotto rispetto agli elementi della pagina.

?wmode=transparent è il parametro in questione e va aggiunto in coda all’url del video nel codice di incorporamento.

Esempio di codice da incorporare con il parametro ?wmode=transparent:

<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ZupVXFrUbNQ?wmode=transparent” frameborder=”0″ allowfullscreen></iframe>

Esempio di codice da incorporare con più parametri nello stesso url (tema “light” del player, nessun “related video” e modalità HD attiva):

<iframe title=”YouTube video player” width=”525″ height=”325″ src=”http://www.youtube.com/embed/ZupVXFrUbNQ?rel=0&theme=light&hd=1&wmode=transparent” frameborder=”0″ allowfullscreen></iframe>

Tags:


Tips: abilitare Airdrop sui mac non supportati ufficialmente