Comment placer un DIV sur les iframes Youtube

Je ne sais pas si vous avez remarqué, mais lorsqu’on place des vidéos Youtube sur un site web, celles-ci sont systématiquement placés au dessus des autres éléments. Rien a faire, même si vous faite mumuse avec le z-index.

Voici une méthode qui permet de placer un encart au dessus des iframes Youtube. Très pratique pour placer des publicités ou des inscriptions en popup.

En fait la solution est extrêmement simple, encore faut-il le savoir. Il suffit d’ajouter un paramètre wmode dans l’url de la vidéo:

<iframe width="425" height="349" src="https://www.youtube.com/embed/8tPnX7OPo0Q?wmode=transparent" frameborder="0" allowfullscreen></iframe>

Ce simple ajout permet de placer la vidéo sous le reste des éléments. Si vous avez un div flottant qui passe dessus, ce dernier ne sera pas occulté.

Notez que si vous avez d’autres paramètres dans votre url, mieux vaut placer wmode à la fin.

<iframe width="425" height="349" src="https://www.youtube.com/embed/8tPnX7OPo0Q?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

via