CODEWITHSUNDEEP
htmlcss
Mert METİN
Mert METİN

Reputation: 1288

CSS and embed video resizing

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:

enter image description here

Upvotes: 0

Views: 4114

Answers (2)

Sampson
Sampson

Reputation: 268326

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>

Upvotes: 4

Elliot Bonneville
Elliot Bonneville

Reputation: 53291

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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Upvotes: 0

Related Questions