HTML嵌入視頻

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>