How to center embedded video in Decode

You’ll have to achieve this with CSS. And avoid making the changes in the theme CSS else it’ll be overwritten next time you update the theme.

Instead, add custom CSS via the Custom CSS facility in the Jetpack plugin, or Appearance_Customize_Other Options.

This should do it, and will help with the oddities of Slideshare embeds too. Add the following custom CSS:

.centerembed {
	position: relative;
	padding-bottom: 75%;
/* 4/3 ratio */
	padding-top: 30px;
/* IE6 workaround*/
	height: 0;
	overflow: hidden;
}

.centerembed iframe,
.centerembed object,
.centerembed embed {
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	top: 0;
	left: 0;
	height: 100%;
}

And then in the text editor, not the visual editor, making sure to leave the embed URL alone on its own line:

<div class="centerembed">
https://youtube.com/123456
</div>

Thanks for the response psheld, I appreciate the help!

Unfortunately that didn’t seem to do the trick. I added the code you provided to the Custom CSS and also added the <div> lines above and below the YouTube link in the text editor, as you suggested.

The result was that the video was cut in half and still aligned to the left of the page.

Not sure if you have any other suggestions or an idea of why that might have happened.

Can you send me a link to the page in question?

I wrap the link with the center tag. Works every time.

psheld and rtcunningham methods doesn’t work for me. ??
Example: https://ironfactory.pl/2014/09/bole-plecow-zapobieganie/

Whoops. Missed a line. How about this:

.centerembed iframe,
.centerembed object,
.centerembed embed {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	top: 0;
	left: 0;
	height: 100%;
}

And remove the <p> tags from around the Youtube URL. These get added when pasting in the URL in visual editor mode instead of text editor mode.

That actually seemed to work for me, psheld.

The video has moved to the centre, but the only problem now is that it is still cut in half. *edit* Actually, it’s not so much cut in half as not a FULL SIZE YouTube video (the video appears as a thin strip).

For an example, you can check out the video at the bottom of the post on my homepage: https://www.ropeofsand.com

Thanks again for the help!

Damn, roll on HTML5 video when we don’t have to bother with this embed / iframe crap!

You’ll notice btw that we’re trying to get this responsive / fluid rather than fixed width and height.

Right, checked my code with this awesome explanation, and tested it on your homepage. Works fine for me.

I got the percentages wrong above for 4:3, and besides 16:9 is a more common aspect ratio these days. So on that basis, with full width embeds:

.centerembed {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}
.centerembed iframe, .centerembed object, .centerembed embed {
    height: 100%;
    width: 100%;
    position: absolute;
    margin: 0 auto;
}

56.25 is 9/16ths of 100. So for, say, 80% wide, you’d set the width accordingly and change padding-bottom to 80 x 9/16 = 45%.

I think I’m with you and we’re almost there.

What I did was copy the code you provided above OVER the code I had added previously in the Custom CSS (the code that moved the video to the center, but reduced the size).

The result is that the video is the right size, but back on the left.

Should I have left any of the previous code in place?

Sorry, I must sound like a novice of note!

No, you didn’t misinterpret me. It was intended to replace the previous attempt entirely.

It appears that all the examples online for responsive video embedding assume you’ll want 100% width. And indeed, this works for your site.

But I can think of no reason, or find any explanation, as to why the same shouldn’t work for centering a video embed at less than 100% width.

That is strange, but at least I can put up the video at 100% width and have it be centered!

Thanks again for the help, psheld, I appreciate it!