Center align Youtube video

katrinataylortherapy · Member · Jul 30, 2015 at 6:01 pm
Copy link

Add topic to favorites
I would like to center align the youtube video within the text widget on my homepage (scroll down). I’ve tried everything and can’t seem to make it work.

I’ve tried the suggestions here (replacing left/right with center): https://en.support.wordpress.com/videos/youtube/
I’ve tried these codes: <div style=”text-align:center;”>video</div> and <center> video embed code </center>, with my youtube link included.

I was able to align the player when I had the video uploaded with videopress but it won’t play on iPads (don’t even get me started on that frustration).

So. What I would like is to center align the youtube video within the front page text widget. How do I do that?

Thank you!

The blog I need help with is: (visible only to logged in users)
darrellschulte · Member · Jul 30, 2015 at 7:17 pm
Copy link
Hi Katrina,

This CSS should center that video on your homepage — how does it look?
```
.home .embed-youtube iframe {
    margin-left: auto !important;
    margin-right: auto !important;
}
```
musicdoc1 · Member · Jul 30, 2015 at 7:30 pm
Copy link
@ daschultemn,
Pardon me. I’m sure your suggestion works fine, but it can also be done without CSS customization, as described below.

@ katrinataylortherapy,
Hi,
I just ran some tests and found that
<div style="text-align:center;">video URL</div>
doesn’t work. However, the second option you mention, incorporating the embed code rather than the video URL, works perfectly. In my tests, updating the text widget with the embed code transformed it into shortcode, and the functioning player appeared centered.

Example:

<div align="center"><iframe width="480" height="360" src="https://www.youtube.com/embed/k8Oux8s2eaw" frameborder="0" allowfullscreen></iframe></div>
changes upon updating of the text widget to
<div align="center">[youtube https://www.youtube.com/watch?v=k8Oux8s2eaw&w=420&h=315]</div>
musicdoc1 · Member · Jul 30, 2015 at 7:40 pm
Copy link
@ katrinataylortherapy,

Sorry, I just noticed that the tags in the code I used were significantly different than in the two you mentioned:
<div align="center">embed code</div>
vs.
<div style="text-align:center;">video [URL]</div> or
<center> video embed code </center>
katrinataylortherapy · Member · Jul 30, 2015 at 9:36 pm
Copy link
@daschultemn – thank you so much! That worked perfectly!

@musicdoc1 – I really appreciate you taking the time to help.

Love the wordpress.com community – thanks again guys!
musicdoc1 · Member · Jul 30, 2015 at 10:30 pm
Copy link
You’re welcome!

No items found.