Html/General - help for u

[locutus]

I have been making web pages for about 10 years now and will gladly offer what help I can to whoever needs it. I am no good at hardcore languages but I have 10 years worth of experience, collected resources, graphics, code snipplets, example pages and killer software.

If I have the time I will try to help.

[LittleSteps]

How do I center a youtube video on a black screen? like i got this

Code: Select all

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

but im not sure how to center it on the page
should i just use html or css?

[sinewav]

CSS

Code: Select all

<style>
    iframe {display: block; margin: 0 auto;}
</style>

Alternatively,

Code: Select all

<iframe style="display: block; margin: 0 auto;" width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

[Light]

An additional option to add to Sine's answer. By default, iframe elements obey CENTER tags. At least in Chrome and Firefox. Of course, this will stop working at some point since I believe CENTER tags have been deprecated.

Code: Select all

<center>
  <iframe src="https://lightron.org"></iframe>
</center>

The proper way to do it now would be to use text-align CSS.

Code: Select all

<div class="center">
  <iframe src="https://lightron.org"></iframe>
</div>

Code: Select all

/*
 * The DIV element could also have a style attribute:
 *   style="text-align: center;"
 */
.center
{
  text-align: center;
}

Here is a working example, and the code below.
https://jsfiddle.net/txuLhd8w/

Code: Select all

<div style="text-align: center;">
  <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>