如何在 Youtube 视频上显示 div（z-index）？
我想在 YouTube 视频上显示 div，但无法使其工作。我知道如果您将 wmode 设置为 transparent 或 opaque 它应该可以工作，但我只在 使用 或
<!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>
I want to show a div over a YouTube video but can't get it to work. I know that if you set the wmode to transparent or opaque it should work, but I've only seen this work when the <embed> or <object> tag is used. YouTube now embeds the video in an <iframe> so when I tried it, it didn't work. Here's what my code looks like.
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
试试这个代码：
Try this code:
我在嵌入“链接”的末尾添加了 ?wmode=opaque ，它对我有用。
http://www.youtube.com/embed/I7a3acpVp1g?wmode=opaque 为我工作。所以完整来说就是
I added the ?wmode=opaque at the end of the embed "link" and it worked for me.
http://www.youtube.com/embed/I7a3acpVp1g?wmode=opaque worked for me. so in full it is
显然，当使用 iframe 时，它会自动将 wmode 设置为窗口化，因此请尝试通过修改 iframe src 直接设置 Flash 播放器的 wmode，如下所示：
src="http://www.youtube.com/v/8lVJV--SrGg ?loop=1&autoplay=1&autohide=1&hd=1&modestbranding=1&wmode=opaque"你可以请参阅我将
&wmode=opaque添加到参数列表的末尾。现在您应该可以覆盖 div 了。参数也以?开头，而不是&。Apparently when using an iframe it sets the wmode automatically to windowed so try setting the flash player's wmode directly by modifying the iframe src like so:
src="http://www.youtube.com/v/8lVJV--SrGg?loop=1&autoplay=1&autohide=1&hd=1&modestbranding=1&wmode=opaque"As you can see I added
&wmode=opaqueto the end of the parameter list. That should enable you to now overlay a div. Parameters also start with a?, not a&.在 rel=0 （我已经有了这个）之后，我添加了这个 &modestbranding=1&wmode=opaque" ，现在它适用于所有主要浏览器，包括 IE11.0。所以，这对我有用。
非常感谢，祝 2015 年新年快乐！致这个社区的所有成员。
After rel=0 (I already had this) I added this &modestbranding=1&wmode=opaque" and now this work properly for all major browsers, included IE11.0. So, this is worked for me.
Thanks a lot and Happy New Year 2015! to all members of this community.