Question

我喜欢在我的网页上嵌入一个视频，并在其下方添加一些填充。我有以下但不确定是否有更有效的方法：

     <div style="text-align: center;">

      <iframe width="560" height="315" src="http://www.youtube.com/embed/ti_E2ZKZpC4" frameborder="0" allowfullscreen></iframe>      

      <br />
      <br />
    </div>

另外，我如何在其周围加上细线边框，文字描述视频内容：意思是我喜欢在视频下面显示化学，然后在视频和文本化学上有边框。

Answer 1

在我看来，实现这一目标的最有效方法是使用CSS为包含div提供边框，并为iframe提供底部边距。然后，文本可以在包含div内的iframe下面。

HTML看起来像这样：

<div id="container">
    <iframe id="vid" width="560" height="315" src="http://www.youtube.com/embed/ti_E2ZKZpC4" frameborder="0" allowfullscreen></iframe>
    <p>Text/description go here</p>
</div>

CSS：

#container {
    border: 1px solid red;
    width: 560px;
    text-align: center;
}

#vid {
    margin-bottom: 25px;   
}

这是一个jsfiddle示例：http://jsfiddle.net/kSfCR/3/

编辑：格式化...

Answer 2

如何简化它？

.myvideo {
    margin:0 0 30px;
}

<iframe class="myvideo" width="560" height="315" src="http://www.youtube.com/embed/ti_E2ZKZpC4" frameborder="0" allowfullscreen></iframe>

HTML嵌入视频

2 个答案: