CSS and embed video resizing

Question

I am retrieving video embed urls from my database.

In my database, my videos are 600x450. What I want to do is make them smaller and place them within a <td>. In order to accomplish this, I wrote the following CSS with template lite tags:

<style type="text/css">
{literal}
  div.embed
  {
    width:  200px;
    height: 100px;
  }
{/literal}
</style>

My markup follows:

<tr>
  <td>Fragmanlar</td>
  <td>
    <div class="embed"/> 
      {foreach value=movieF from=$movieFragman}
        {$movieF.embedCode} 
      {/foreach}
    </div>
  </td>                
</tr>

The problem is that my video sizes are not being affected, and it runs over the edges of my <td>.

image:

Answer 1

You cannot target the container of the videos themselves, you would need to target the actual video element. If they are within div.embed, you can amend this selector for specificity:

div.embed video {
  width:  200px;
  height: 100px;
}

This, of course, assumes you're using the HTML5 video tag. If you are not, you may need to target either embed or object, depending on how you display your videos.

For example, you may have something like the following:

<object width="560" height="315">
  <param name="movie" value="http://www.youtube.com/v/NWHfY_lvKIQ?version=3&amp;hl=en_US"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/NWHfY_lvKIQ?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

You could target both the object and its embed child:

div.embed object,
div.embed embed {
  width:  200px;
  height: 100px;
}

On another note, your opening tag shouldn't self-close, as this may cause problems identifying nested elements within.

<div class="embed">
  <video...>
    <source... />
  </video>
</div>

Answer 2

It would seem that you accidentally closed your div to early by using <div class="embed" />. You wanted <div class="embed"> instead. (note the lack of the forward slash)

<tr>
    <td> Fragmanlar </td>
    <td>
        <div class="embed"> 
            {foreach value=movieF from=$movieFragman}
            {$movieF.embedCode} 
            {/foreach
            }
        </div>
    </td>
</tr>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​