¿Cómo mostrar un div sobre un video de Youtube (z-index)?
Quiero mostrar un div sobre un video de YouTube pero no puedo hacer que funcione. Sé que si configuras lawmode atransparent oopaque debería funcionar, pero solo he visto este trabajo cuando el<embed> o<object>e usa la etiqueta @. YouTube ahora inserta el video en una<iframe> así que cuando lo probé, no funcionó. Así es como se ve mi código.
<!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;
}
</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>