Comment montrer une div sur une vidéo Youtube (z-index)?

Je veux afficher un div sur une vidéo de YouTube, mais ne peut pas le faire fonctionner. Je sais que si vous définissez la wmode à transparent ou opaque il devrait fonctionner, mais je n'ai vu que ce travail lors de la <embed> ou <object> balise est utilisée. YouTube intègre la vidéo dans un <iframe> donc quand je l'ai essayé, ça ne fonctionne pas. Voici ce que mon code ressemble.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title></title> 
<style type="text/css">@import "réinitialiser.css";</style> 
<style type="text/css"> 
body { 
arrière-plan:#000; 
police:62.5%/240% Helvetica, Arial, sans-serif; 
overflow:hidden; /* Pour éviter de montrer une barre de défilement */
} 
div { 
arrière-plan:#f00; 
position:absolute; 
min-width:100%; 
min-height:100px; 
z-index:99; 
} 
</style> 
</head> 
<body> 
<div></div> 
<iframe width="100%" height="100%" src="http://www.youtube.com/v/8lVJV--SrGg&loop=1&autoplay=1&autohide=1&hd=1&modestbranding=1" frameborder="0" allowfullscreen></iframe> 
</body> 
</html>

source d'informationauteur Edvard

  1. 19

    J'ai ajouté de l' ?wmode=opaque à la fin de l'embed "lien" et il a travaillé pour moi.

    http://www.youtube.com/embed/I7a3acpVp1g?wmode=opaque a fonctionné pour moi. donc au complet, c'est

     <iframe width="250" height="188" src="http://www.youtube.com/embed/I7a3acpVp1g?wmode=opaque" frameborder="0" allowfullscreen></iframe>
  2. 6

    Apparemment lors de l'utilisation d'une iframe, il définit le paramètre wmode automatiquement en mode fenêtré donc essayer de régler le flash player wmode directement par la modification de l'iframe src:

    src="http://www.youtube.com/v/8lVJV--SrGg?loop=1&autoplay=1&autohide=1&hd=1&modestbranding=1&wmode=opaque"

    Comme vous pouvez le voir, j'ai ajouté &wmode=opaque à la fin de la liste des paramètres. Cela devrait vous permettre de maintenant superposition d'un div. Paramètres aussi commencer avec un ?pas un &.

  3. 1

    Après rel=0 (j'ai déjà eu ce), j'ai ajouté ce &modestbranding=1&wmode=opaque" et maintenant cela fonctionne correctement pour tous les principaux navigateurs, inclus IE11.0. Donc, c'est travaillé pour moi.
    Merci beaucoup, et bonne et Heureuse Année 2015! à tous les membres de cette communauté.

  4. 0

    Essayez ce code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style type="text/css">@import "reset.css";</style> 
        <style type="text/css">
            body {
            background:#000;
            font:62.5%/240% Helvetica, Arial, sans-serif;
            overflow:hidden; /* To avoid showing a scrollbar */
            }
            div {
            background:#f00;
            position:absolute;
            min-width:100%;
            min-height:100px;
            z-index:99; 
            }
            iframe {
            position:absolute;
            min-width:100%;
            min-height:100%;
            }
        </style>
    </head>
    <body>
        <div></div>
        <iframe src="http://www.youtube.com/v/8lVJV--SrGg?loop=1" frameborder="0"></iframe>
    </body>
    </html>