1

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

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

另外，我如何在它周围加上一条细线边框，并附上描述视频内容的文字：这意味着我喜欢在视频下方显示化学，然后在视频和文本化学周围有一个边框。

4

2 回答 2

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/

编辑：格式化...

于 2012-11-12T17:03:45.727 回答
0

怎么简化呢？

.myvideo {
    margin:0 0 30px;
}

<iframe class="myvideo" width="560" height="315" src="http://www.youtube.com/embed/ti_E2ZKZpC4" frameborder="0" allowfullscreen></iframe>
于 2012-11-12T16:54:30.027 回答