html - CSS 和嵌入视频调整大小

Question

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

在我的数据库中，我的视频是 600x450。我想要做的是将它们变小并将它们放在 <td> 中.为了实现这一点，我使用 template 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>