Question

I like to embed a video on my page as well as have some padding below it. I have the following but not sure if there is a more efficient way of doing it:

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

Also how would I put a thin line border around it with text describing what the video: meaning I like to show Chemistry below the video which will then have a border around the video and the text Chemistry.

Answer 1

The most efficient way to accomplish this in my opinion would be to use CSS to give the containing div a border, and give the iframe a bottom margin. The text can then go below the iframe inside the containing div.

The HTML can look something like this:

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

And the CSS:

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

#vid {
    margin-bottom: 25px;   
}

Here is a jsfiddle example: http://jsfiddle.net/kSfCR/3/

EDIT: Formatting…