Html/General - help for u

Everything todo with programming goes HERE.
Post Reply
User avatar
locutus
Match Winner
Posts: 662
Joined: Mon Jan 19, 2004 10:28 pm
Location: MST [Quotation: "No Good Deed Ever Goes Unpunished.."]
Contact:

Html/General - help for u

Post by locutus » Sat Feb 07, 2004 7:45 am

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

User avatar
LittleSteps
Core Dumper
Posts: 157
Joined: Thu Apr 12, 2012 2:30 am

Re: Html/General - help for u

Post by LittleSteps » Mon Feb 25, 2019 11:49 pm

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?

User avatar
sinewav
Graphic Artist
Posts: 6197
Joined: Wed Jan 23, 2008 3:37 am
Contact:

Re: Html/General - help for u

Post by sinewav » Tue Feb 26, 2019 4:27 am

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>

User avatar
Light
Reverse Outside Corner Grinder
Posts: 1637
Joined: Thu Oct 20, 2011 2:11 pm

Re: Html/General - help for u

Post by Light » Wed Feb 27, 2019 11:54 am

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>

Post Reply