Center YouTube Embeds

[ErnieG014]

Hello,

I'm not sure if this is even a feature yet (or if I'm just not doing something right). So I'm posting this in the product feedback/ideas section. When pasting a YouTube link on a post, it will automatically embed and show a preview of the video on the post while editing. However, once this is done, you can't do any formatting to the YouTube video. If you highlight it and press center it will not center. Even if you are already typing in center and embed a video, it will align to the left side of the post.

Is there anyway to change this or add formatting options for embedded videos? Currently, you can't center YouTube videos without turning on HTML and adding center tags around YouTube's embedded <div> tags.

If I've posted this in the wrong section, let me know! Thanks!

[Husky_Jim]

Is there a solution for this?

 

Thanks!

[opentype]

The videos are block elements, so they aren’t meant to react to text alignment like inline elements. 

One can add this to the custom.css to change the alignment of embedded videos globally. 

div.ipsEmbeddedVideo {
    margin:0px auto;
}

 

[Husky_Jim]

thanks for this but does not help as you cannot make this change globally...a post can be centered, left, or right and will always end up with 'crooked' layout....

[greek_parea]

i have this problem & me

[steve00]

On ‎17‎/‎10‎/‎2017 at 11:27 AM, greek_parea said:

i have this problem & me

Sorry not sure I follow

Just posted video in my forum and centered for me (size even changed when changing screen size)

Perhaps link to your forum with posted youtube video so can see why happens on your forum

[Ioannis D]

I have the below code in my custom.css to center and resize embed video:

div.ipsEmbeddedVideo {
    margin:0px auto;
}

.ipsEmbeddedVideo.ipsEmbeddedVideo_limited > div,
.ipsEmbeddedVideo:not(.ipsEmbeddedVideo_limited){
  max-width: 700px;
  padding-bottom: 0;
}

.ipsEmbeddedVideo.ipsEmbeddedVideo_limited > div:after,
.ipsEmbeddedVideo:not(.ipsEmbeddedVideo_limited):after{
  content: '';
  display: block;
  padding-bottom: 56.25%;
}