CSS和嵌入视频大小调整

Question

我正在从我的数据库中检索视频嵌入网址。

在我的数据库中，我的视频是600x450。我想做的是让它们变小并将它们放在<td>内。为了实现这一点，我用模板lite标签编写了以下CSS：

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

我的标记如下：

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

问题是我的视频尺寸没有受到影响，并且它会在<td>的边缘上运行。

图像：

Answer 1

您无法定位视频的容器本身，您需要定位实际的视频元素。如果它们在div.embed范围内，您可以修改此选择器以获得特异性：

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

当然，这假设您使用的是HTML5 video标记。如果不是，您可能需要定位embed或object，具体取决于您展示视频的方式。

例如，您可能会遇到以下情况：

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

您可以定位object及其embed孩子：

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

另一方面，您的开始标记不应该自行关闭，因为这可能会导致识别嵌套元素的问题。

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

Answer 2

使用<div class="embed" />似乎意外地将您的div意外关闭。你想要<div class="embed">。 （注意缺少正斜杠）

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