CSS 将带有样式的 DIV 包裹在嵌入的 YouTube 视频周围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4620763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrap a DIV with a style around an embedded YouTube video
提问by stephmoreland
I've embedded three YouTube videos onto a page, but I've wrapped them with a DIV and a CLASS called "videoplayer", but the DIV and the CLASS seem to be ignored because they don't display in the page.
我已经将三个 YouTube 视频嵌入到一个页面上，但是我用一个 DIV 和一个名为“videoplayer”的 CLASS 包装了它们，但是 DIV 和 CLASS 似乎被忽略了，因为它们没有显示在页面中。
You can see it here: http://72.4.166.89/en/tutorial.asp
你可以在这里看到：http: //72.4.166.89/en/tutorial.asp
Here's the CSS being used:
这是正在使用的 CSS：
.videoplayer {
border: 1px solid #1D740C;
height: 384px;
width: 480px;
padding: 0px;
margin-left: 25px;
margin-bottom: 25px;
}
}
I've looked with most of my tools and I don't see the DIV or the CLASS having been used at all, but they are there. Has anyone else run into this, or is this not allowed?
我已经查看了我的大部分工具，我根本没有看到 DIV 或 CLASS 被使用过，但它们在那里。有没有其他人遇到过这种情况，或者这是不允许的？
回答by Damien-Wright
Instead of creating the div to surround the player and adding a class to the div, why not just use the built in class of the player youtube-playerto apply your styling:
与其创建 div 来包围播放器并向 div 添加一个类，不如直接使用播放器的内置类youtube-player来应用您的样式：
.youtube-player{
border: 1px solid #1D740C;
height: 390px;
width: 480px;
padding: 0px;
margin-left: 25px;
margin-bottom: 25px;
}
Working example on jsfiddle: http://jsfiddle.net/Damien_at_SF/guSAC/1/
jsfiddle 的工作示例：http: //jsfiddle.net/Damien_at_SF/guSAC/1/
This by-passes the need to have a parent div and also the problem that you have above :)
这绕过了对父 div 的需求以及您在上面遇到的问题:)
hope that helps :)
希望有帮助:)
回答by mozami
The div with class "videoplayer" is on your page but will not do anythingextraordinary if you do not apply any css style information. If you want to seethe div, add a background color or border etc. eg.
带有“videoplayer”类的 div 位于您的页面上，但如果您不应用任何 css 样式信息，则不会做任何特别的事情。如果您想查看div，请添加背景颜色或边框等。例如。
div.videoplayer {
background:black;
border:2px solid red;
padding:10px;
}
...or something to that effect.
...或类似的东西。
回答by Gordon Gustafson
You're div is there, you just can't see it in the browser without some help. What tools did you use? Try firebug, it took me literally 3 seconds to find it with the search feature.
你的 div 就在那里，如果没有一些帮助，你就无法在浏览器中看到它。你用了什么工具？试试萤火虫，我花了 3 秒钟才用搜索功能找到它。
or is this not allowed?
或者这是不允许的？
Its most definitely allowed. Having an object tag inside a div is perfectly fine.
它绝对是允许的。在 div 中有一个对象标签是完全没问题的。
回答by Andreyco
I have found out you are missing closing tab for (at least) one of your divs
我发现您缺少（至少）一个 div 的关闭标签
<div class="videoplayer">
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/icAFUlsysqg?rel=0" frameborder="0"></iframe>
<!-- you see, there is no closing </div> tag, so put it here -->
<div class="videoplayer">
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/WC0E9jHw1B8?rel=0" frameborder="0"></iframe>
</div>
<div class="videoplayer">
<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/ayJbo1-ReBc?rel=0" frameborder="0"></iframe>
</div>
And also, you should define some CSS for this class :)
而且，你应该为这个类定义一些 CSS :)
