locked
What's the best way to center a YouTube video? RRS feed

  • Question

  • I used <div align="center"></div> and it centered my two videos on the page. But I got that line under the code telling me it wasn't the best way to do it. What is the best way? How can I center the video with CSS?
    Thursday, July 25, 2013 12:25 AM

Answers

  • Use two divs, or, more commonly when the elements have identical properties, assign a class to them and change the selector from an id ("#") to a class (".") specifier. So, the example becomes...

    <div class="youtube">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/60MQ3AG1c8o" frameborder="0" allowfullscreen></iframe>
    </div>
    and...
    .youtube {
    	width: 600px;
    	margin: 0 auto;
    	text-align: center;
    }

    You can reuse classes as many times as you want, on the same page or throughout the site.  ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Thursday, July 25, 2013 2:13 PM .....
    • Marked as answer by TommyVincent Saturday, July 27, 2013 11:16 AM
    Thursday, July 25, 2013 2:11 PM
  • I used <div align="center"></div> and it centered my two videos on the page. But I got that line under the code telling me it wasn't the best way to do it. What is the best way? How can I center the video with CSS?

    By using something like this:

    1) First your HTML:

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

    2) Now your css like this:

    #youtube {
    	width: 600px;
    	margin: 0 auto;
    	text-align: center;
    }

    This should work.  To align a div you need two things:

    a) Width of the DIV;

    b) margin-left and margin-right to be auto;

    This works in almost 99% of the cases.

    Good luck.

     

    Prolific Computer user



    • Edited by John Hacker Thursday, July 25, 2013 1:22 AM typo
    • Marked as answer by TommyVincent Thursday, July 25, 2013 1:54 PM
    Thursday, July 25, 2013 1:12 AM

All replies

  • I used <div align="center"></div> and it centered my two videos on the page. But I got that line under the code telling me it wasn't the best way to do it. What is the best way? How can I center the video with CSS?

    By using something like this:

    1) First your HTML:

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

    2) Now your css like this:

    #youtube {
    	width: 600px;
    	margin: 0 auto;
    	text-align: center;
    }

    This should work.  To align a div you need two things:

    a) Width of the DIV;

    b) margin-left and margin-right to be auto;

    This works in almost 99% of the cases.

    Good luck.

     

    Prolific Computer user



    • Edited by John Hacker Thursday, July 25, 2013 1:22 AM typo
    • Marked as answer by TommyVincent Thursday, July 25, 2013 1:54 PM
    Thursday, July 25, 2013 1:12 AM
  • John's method works fine, and just so you know why EW cautioned you about the syntax, all HTML presentational properties (such as "align," "font," "bgcolor," "alink,"etc.) have been deprecated. All of the presentational attributes controlled by these properties can be, and should be, set using CSS instead, as in the method described above.

    This is in compliance with the principle of separating content from presentation. One of the major advantages of this is that if/when you decide to change the appearance of common elements (headings, lists, paragraph text, etc.) you can do it in one location, the CSS, instead of having to visit each and every HTML element which was styled using presentational properties to change those properties throughout the page/site.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Thursday, July 25, 2013 1:45 AM
  • In the book I got about EW4 is this: "you can use the ID only once...if you want your page to remain compliant to web standards..."

    I'm putting two YouTube videos on a page (one in Spanish, one in English). I'm using the CSS that you suggested and it works perfectly. The pages render just right on the browsers. But how about that restriction of one ID to a page?

    Thursday, July 25, 2013 2:00 PM
  • Use two divs, or, more commonly when the elements have identical properties, assign a class to them and change the selector from an id ("#") to a class (".") specifier. So, the example becomes...

    <div class="youtube">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/60MQ3AG1c8o" frameborder="0" allowfullscreen></iframe>
    </div>
    and...
    .youtube {
    	width: 600px;
    	margin: 0 auto;
    	text-align: center;
    }

    You can reuse classes as many times as you want, on the same page or throughout the site.  ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Thursday, July 25, 2013 2:13 PM .....
    • Marked as answer by TommyVincent Saturday, July 27, 2013 11:16 AM
    Thursday, July 25, 2013 2:11 PM
  • This advice will help me because I'm going to embed several more videos. The code is clean and efficient and it works.
    Saturday, July 27, 2013 11:17 AM