Why isn't my embedded YouTube video centering correctly?

Store Design
1

Hi I’m trying to center my embedded youtube video of my page but I can’t.

have tried ALL the solutions given in the forum and none worked.

I’d appreciate a lot the help.

thanks

Captura de pantalla 2022-02-11 115702.png
Captura de pantalla 2022-02-11 115702.png3409×1435 382 KB

https://alexassen.com/

2

Hi @alexassen

I can help you

3

Can someone help me pls? thanks

4

The problem is that you’re setting iframe size in pixels in your stylesheet:

.VideoWrapper iframe,
.VideoWrapper object,
.VideoWrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
  height: 700px;
  width: 1200px;
}

Instead, you should use rule like this, if you simply add it at the bottom of the file:

.VideoWrapper iframe {
    width: 100%;
    height: 100%;
}

or, if you want to edit the original rule:

.VideoWrapper iframe,
.VideoWrapper object,
.VideoWrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

This may make your video too big on wide screens, but then you should limit the section width (if your theme supports it) or more complex edits are necessary.

1 Like
5

thanks, I did that, but now the video doesn’t even appear :(.

I’ve been testing all kind of code, it seems like the theme aligns everything automatically to the left.

I’d appreciate so much if you could help me with this!

thank you

6

Hmm – that’s what I see:

.VideoWrapper iframe,
.VideoWrapper object,
.VideoWrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
}

Should be

.VideoWrapper iframe,
.VideoWrapper object,
.VideoWrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
1 Like
7

Thanks Tim, now it appears, and as you mentioned it is widescreen and very big.

This is why I tried the max-width and max-height to 100% so it would respect the resolution given in the custom html in the youtube embed code. It’s then when it aligns to the left.

8

Right, setting max-width in your case will make it left-aligned because of the other styles applied.

Here is a hackish fix – add this CSS rule:

.template-product .Rte {
    max-width: 1250px;
}

This will limit the width of .Rte element which contains your video and, therefore, the width of the video and should only work on product pages.

( .Rte elements are used to wrap content you type in rich text editor like product or collection descriptions and is not used for the special Video sections)

Or this one is a bit more proper, instead of the CSS rule above you can put this code into your custom.js asset:

for (var o of document.querySelectorAll('.VideoWrapper')) {
    let v = o.outerHTML;
    o.outerHTML = ''+ v + '
';
}

The best way would be to modify theme.js, but it’s more complex.

1 Like
9

You sir, are an absolute legend. It works now!

thank you so much!!