Question

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

Answer 1

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.