2012-11-12 56 views
1

我喜欢在我的页面上嵌入视频,并在其下面填充一些填充。我有以下但不知道是否有这样做的更有效的方法:HTML嵌入视频

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

而且我怎么会放一细线边框它与文字描述视频内容:意思是我喜欢下面显示化学那么视频将会在视频和文本化学的边界上出现边框。

回答

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/

编辑:格式化...

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>