Wie kann ich ein halbtransparentes Div auf einem YouTube-iFrame überlagern?

Einen halbtransparenten Div über einen YouTube-iFrame legen

Eingebettete YouTube-Videos in einen iFrame stellen eine einzigartige Herausforderung dar, wenn man versucht, einen Semitransparenten zu überlagern -transparente div. Im Gegensatz zur vorherigen Methode zur Verwendung eines Element mit wmode="transparent" für eine Objekteinbettung, die iFrame-Implementierung wird um mehr als 100 % erweitert.

Verstehen des Problems

Der Z-Index eines in iFrame eingebetteten Videos ist normalerweise höher als alle anderen Elemente auf der Seite. Dies bedeutet, dass jedes darüber platzierte Div ausgeblendet wird.

Lösung: „wmode=opaque“ an die iFrame-URL anhängen

Die Lösung liegt in der Änderung des YouTube-iFrames URL durch Anhängen eines GET-Parameters wmode=opaque. Dieser Parameter gibt an, dass das Video in einem Modus gerendert werden soll, der es anderen Elementen ermöglicht, es zu überlagern.

Verwendung

Um dies zu implementieren, fügen Sie einfach wmode=opaque als hinzu erster Parameter in der iFrame-Quell-URL. Zum Beispiel:

<iframe class="youtube-player" type="text/html" width="520" height="330" src="https://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

Hinweis:

• Stellen Sie sicher, dass wmode=opaque der erste Parameter in der URL ist.
• Andere Parameter sollte nach wmode=opaque angehängt werden.

Durch Befolgen dieser Schritte können Sie a erfolgreich überlagern halbtransparentes Div über einem eingebetteten YouTube-iFrame-Video.

Das obige ist der detaillierte Inhalt vonWie kann ich ein halbtransparentes Div auf einem YouTube-iFrame überlagern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!