How to Center YouTube Video Embed

In this tutorial you will learn how to center an embedded YouTube video using HTML.

In this tutorial you are going to learn how to center youtube video embed with HTML which is a simple process that just requires the addition of a small bit of code.

Step # 1 -- Viewing the Current Alignment

First of all you need to open the HTML code that contains the video. In this example we have the embed code for the video in Notepad. When we open this code in a browser we can see that by default the video appears on the left of the screen -- this is what we want to change.

Step # 2 -- Inserting the Extra Code

We need to add two extra pieces of code, one right at the beginning of the body which reads "center" and then one at the end which reads "/center". Save the file and this is essentially how to center youtube video embed, navigate back to the web browser, click refresh and you will see that the video now appears in the center of the page.

[howtechweb]

❗ Subscribe To Our Main YouTube Channel

[LuxSaturni]

Here's a better way if you intend on being HTML5 standards-compliant and don't want your page to render in Quirks mode. Add an external stylesheet for your page and add the following:

iframe{
margin-left: auto;
margin-right: auto;
display: block;
border-radius: 5px;
}

Border-radius just rounds the edges of the iframe element in modern browsers. Note that for most elements the margin-left: auto and margin-right:auto are the big determiners of horizontal centered-ness depending on parent element position and width. The display:block treats the element as a block-level element and allows it to "fill the width" of its parent container while the margin properties center it within that parent container.

[voltronLion]

Sometimes one of the best tutorials is from the past! Thanks a million.

[brookestraitonphotography]

Seriously the easiest and best way I have found. Thank you!

[ShailajaV]

This worked like a charm. Thank you so much!

[weliveforvacations]

Awesome. So simple, but I've been trying to figure this out for hours. I guess I didn't think it could be that easy!

[GabrielTobing]

Thanks, it helped a lot.
Can't believe I forgot one of the most basic things of HTML, its been too long.

[thescarybobcat]

this helped me heaps! i completley forgot the center tags hahaha

[miakennedy]

Struggled for hours trying to center my video, learns to center it in less than a minute. Thank you lmao

[yhct-lehuuminh]

A simple code but very effective! Thank you

[cooranbongfarmhousesoaps]

Thank you so much! I have been trying to work this out for so long! This video explains it so simply :)

[PianistifiedForYT]

I used the <iframe> tag and then, this doesnt work. Do I need to change the code?

[californicationvideogame]

Thank you!!!! All of the other videos didn't work.

[richardatobosomtwi]

This tutorial was so helpful. Thanks

[BeadingBelles]

Thankyou for your short and concise video, Just what I needed to know.

[dhwanitgohel]

Thank you very much i was struggling for this only!

[VideoEasyPeasy]

Excellent video. It was exactly what I needed today. Thank you much.

[whatismyhealth]

This was helpful and it worked on our site. Thank you!

[raquelgamboamogollon]

Thank you very much, simple, easy and clear.

[petereggison]

Many thanks for your video. A great help.