如何显示Youtube视频（z-index）上的div？ [英] How to show a div over a Youtube video (z-index)?
问题描述
我想在YouTube视频上展示一个div，但无法使其正常工作。我知道如果将 wmode 设置为透明或者 opaque 它应该可以工作，但是我只在< embed> 或< object> 标签被使用。 YouTube现在将视频嵌入< iframe> 中，所以当我尝试它时，它不起作用。
$ b <！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-Typecontent =text / html; charset = UTF-8/>
< title>< / title>
< style type =text / css> @importreset.css;< / style>
< style type =text / css>
body {
background：＃000;
字体：62.5％/ 240％Helvetica，Arial，sans-serif;
overflow：hidden; / *为了避免显示滚动条* /
}
div {
background：＃f00;
position：absolute;
最小宽度：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=1frameborder =0allowfullscreen>< / iframe>
< / body>
< / html>
我在embedlink末尾添加了？wmode = opaque，为我工作。
http://www.youtube.com/embed/I7a3acpVp1g ？wmode = opaque为我工作。所以完全是
< iframe width =250height =188src =http：// www .youtube.com / embed / I7a3acpVp1g？wmode = opaqueframeborder =0allowfullscreen>< / iframe>
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>
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 width="250" height="188" src="http://www.youtube.com/embed/I7a3acpVp1g?wmode=opaque" frameborder="0" allowfullscreen></iframe>
这篇关于如何显示Youtube视频（z-index）上的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
