Centre embedded Youtube video
-
I have read on several forums the quick fix to centring embedded Youtube videos however the code supplied isn’t working for me.
This is my website (and the page of concern):
michaeladaphne.comAnd here is the code I have used:
<div><iframe src=”https://www.youtube.com/embed/y_YApDnwZR4?rel=0″ width=”560″ height=”315″ frameborder=”0″ align=”center” allowfullscreen=”allowfullscreen”></iframe></div>even though the code says “align=center”, the video is not centred. Hope you can help.
-
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″ 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>tagsI’d use the following code instead of
<center>tagsHTML
<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; }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″ width=”560″ height=”315″ frameborder=”0″ align=”center” allowfullscreen=”allowfullscreen”></iframe></div>
http://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>
The topic ‘Centre embedded Youtube video’ is closed to new replies.