Centre embedded Youtube video

I put in <center></center> tags around the entire line of code and I was able to get it to center on a page. Hope that works well for you!

<center><div><iframe src=”https://www.youtube.com/embed/y_YApDnwZR4?rel=0&#8243; width=”560″ height=”315″ frameborder=”0″ align=”center” allowfullscreen=”allowfullscreen”></iframe></div></center>

woot! you’re a lifesaver! Thank you so much ?? It worked like a charm

Glad to help!!!

Adding <center> </center> tags is not the perfect answer.

According to validator.w3.org we should use CSS instead of <center> tags

I’d use the following code instead of <center> tags

HTML

<div class="embed-video">
[embed]https://www.youtube.com/watch?v=2wOz9MuwERs[/embed]
</div>

CSS

.embed-video {
    max-width: 75%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

Click here for demo

Above code makes your embedded video responsive as well.

The last solution did it for me – thanks @amarilindra

That centered the video nicely, thank you – next thing is – how to remove the next related videos. On the original there is ?rel=0, but when you add that to your embed code it then doesn’t work.

Can you add a rel=0 somehow in the CSS?

Thank you.

Actually, a little more searching got this to work:

<p style=”text-align:center”>
<iframe>
…
</iframe>
</p>

?rel=0 should work actually, can you share your full code. So, I can check it from my end.

Thank you

Hi Amar,

I can’t remember my process from yesterday, but it looks like I did get it to work with your code! Here are the links anyway…

<div class=”video-container”><iframe src=”https://www.youtube.com/embed/ZZnIgIDeJAI?rel=0&#8243; width=”560″ height=”315″ frameborder=”0″ align=”center” allowfullscreen=”allowfullscreen”></iframe></div>

https://dev.dorityroofing.com/about-dority-roofing-and-solar/

Thank you for your help!

Luke

Try this. It would work

<div class="embed-video">
[embed]https://www.youtube.com/embed/ZZnIgIDeJAI?rel=0[/embed]
</div>

and add this in your style sheets

.embed-video {
    max-width: 75%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

This worked for me on a non-YouTube vid):

<div style=”text-align: center”>YOUR CODE HERE</div>