css - 在使用 box-shadow 和嵌入式 YouTube 播放器时遇到问题

Question

我想在我的 YouTube 嵌入下显示投影，但当我有不同尺寸的视频时我遇到了麻烦。当我在它周围包裹一个静态 div 时，我可以让它工作，但是对于不同大小的视频来说效果不佳。如果有帮助，它们似乎总是具有相同的宽度 (640px)，高度取决于相机/视频。

是否有更好的方法来做到这一点，也许可以将其应用于 iframe？我是 CSS 的菜鸟，我似乎无法在网上找到答案。

有什么想法吗？

我的代码:
HTML:

<div id="videoclip">
<iframe width="640" height="510" src="http://www.youtube.com/embed/l4hMvo71p4M?rel=0&wmode=transparent&showinfo=0&start=11" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

 #videoclip{
width: 640px;
height: 510px;
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px 5px #818181;
-moz-box-shadow: 5px 5px 5px #818181;
}

Answer 1

使用float: left代替width: 640px;高度:510 像素；。它将使 div 拥抱它的 child 。你可以看到它被摆弄了here .

也可以直接应用于框架 works .