FOUND! How to Center Video Embeds with the New Editor

I like the new editor in WordPress. During development, it was called Gutenberg. Some still call the editor by its development name, but as of November, 2018, the editor is part of the WordPress Core.

I like it, but I have had one problem with it. I couldn’t find a way to center an embedded video from YouTube, Vimeo, etc. Every time that I used an embed block, the video appeared justified to the left. I tried using the Center button. It didn’t work. I tried editing the block in HTML, adding the code to align to the Center. It didn’t work.

Well, today, I had had enough, so I went back to Google to see if anyone had found the solution. WinWar Media has the solution! Unfortunately, their instructions to make all videos appear centered didn’t work. So I tried the other code snippets and voila!

To implement their solution, go into the WordPress Theme Customizer (Appearance|Customize) and scroll down to Additional CSS. To center YouTube videos, just copy/paste the following code into that section of the Customizer:

.wp-block-embed.is-provider-youtube {
display: block;
margin: 0 auto;
text-align: center;
}

To make Vimeo videos center, use this CSS Snippet:

.wp-block-embed.is-provider-vimeo {
display: block;
margin: 0 auto;
text-align: center;
}

Now…. if I can just find a way to not display the Related Videos at the end that are automatically supplied by Google. It used to be possible to do this by adding a little code to the end of the embed. But now that WordPress uses its own embed, I haven’t found a way yet.

I’ll post the fix when I find it!