Having trouble with box-shadow and embedded YouTube player

I would like to display a drop shadow under my youtube embeds, and I am having trouble when I have different size videos. I can get it to work when I wrap a static div around it, however that doesn't work well with different sized videos. If it helps, the开发者_如何学JAVAy seem to always have the same width (640px) and the height depends on the camera/video.

Is there a better way to do this, maybe perhaps apply it to the iframe? I am a noob with CSS and I can't seem to find an answer online.

Any ideas?

My code:

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;
}

---

Use float: left instead of width: 640px; height: 510px;. It will make the div embrace it's child. You can see it fiddled here.

Applying directly to the frame also works.