title: Having trouble with box-shadow and embedded YouTube player
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Any ideas?</p>
  
  <p>My code:<br>
  <strong>Html:</strong></p>
  
  <pre><code>&lt;div id="videoclip"&gt;
  &lt;iframe width="640" height="510" src="http://www.youtube.com/embed/l4hMvo71p4M?rel=0&amp;wmode=transparent&amp;showinfo=0&amp;start=11" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code> #videoclip{
  width: 640px;
  height: 510px;
  box-shadow: 5px 5px #818181;
  -webkit-box-shadow: 5px 5px 5px #818181;
  -moz-box-shadow: 5px 5px 5px #818181;
  }
  </code></pre>