How To Center A Youtube Video Video Html

This might seem similar a very small affair, but it comes up quite often with people depending on how your WordPress site is set up and what theme you're using. And that is how to center YouTube embed on your post. I'm personally a big fan of centered images, and and then to have a YouTube video embedded and left-aligned looks off.

Follow the quick steps beneath on how to center your YouTube videos, both iframes and embeds

• How to middle YouTube iframe
• How to center YouTube embed

How to eye YouTube iframe

By default, in WordPress, when you paste the URL of a YouTube video, information technology should be centered every bit it uses the default WordPress embeds feature. Only this isn't always the case. Some WordPress owners as well take embeds disabled for operation reasons. Sometimes using the iframe lawmaking from YouTube can give you more control.

Step 1

If you click on a YouTube video you tin can grab the "Embed" (iframe) code as seen below.

Step 2

In your WordPress editor you will want to click into the "Text" tab then that you tin can insert code.

Step 3

Paste the embed lawmaking into the WordPress editor. Case:

<iframe src="https://www.youtube.com/embed/9hgiAfrb2NA" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

By default, it might announced similar this below. Every bit you can see, it isn't centered. You could increment the width, simply you want it to match the flow of your other centered images, which are most likely not full screen or full width.

Pace 4

To center the YouTube embed (iframe) we simply need to add a DIV on information technology and text-align center the contents. Below is the new lawmaking.

          <div manner="text-align: middle;"><iframe src="https://www.youtube.com/embed/9hgiAfrb2NA" width="560" pinnacle="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>        

And below is at present what it looks like. You now have a perfectly centered YouTube video! Quick and elementary.

How to center YouTube embed

If you are using the Block Editor, and don't have embeds disabled, then most likely you're only pasting in the URL of the YouTube video and it automatically shows up in your post. If y'all're not seeing information technology automatically get centered, follow the steps below.

Step 1

In WordPress, get to the Customizer. Y'all can discover this in your dashboard nether "Advent → Customize."

Footstep 2

Become to "Boosted CSS." Paste in the following code and click "Publish."

.wp-block-embed-youtube { margin:0 automobile; }

Center YouTube embed in Cake Editor

And that's it!

Summary

Hopefully, this short little tutorial on how to center YouTube embed is helpful. If so, feel free to comment below. Make sure to as well check out our post on how to center a Twitter embed.

Source: https://woorkup.com/center-youtube-embed/

Posted by: tollethaludere.blogspot.com

Share this post