unable to centre an embedded Youtube video

Solved
Highlighted
Tourist
8 0 0

I realize this question has been asked numerous times and there have been answers and accepted solutions, but none of them works for me. 

I'm trying to embed a Youtube video on this page: https://juliewitmermaps.myshopify.com/pages/about (my dev site. password to view is gahffe). I've tried putting in a div tag and centering it, I've tried adding code to theme.scss. I know I'm missing something very basic, but I've spent hours searching through these forums and can't find anything that works.

And after embedding the video there is now a huge amount of whitespace below it. I tried changing the video-wrapper padding-bottom amount from 56.25% to 10%. That works, but it also shrinks the video to a narrow horizontal strip.

I'd also like to remove whitespace between multiple feature-rows on my homepage (juliewitmermaps.myshopify.com). Not sure where to find that setting.

Would greatly appreciate any help.

0 Likes
Highlighted
Shopify Partner
5 1 2

Re: the video centring: Change width and height from 60% to 100%.

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

That will make the video fill the width of the video wrapper. It will be the proper ratio because of the bottom padding of the wrapper.

If that's too wide, then you'll need to wrap the .video-wrapper element in another element and constrain the size of that.

0 Likes
Highlighted
Tourist
8 0 0

Hi,

Thanks for the reply. I reduced it from 100% to 60% because it was too large. It's now the size I want it to be. But I also want to centre it on the page but it stays left aligned. I've tried to add a div tag around it and centre that, but nothing works.

 

0 Likes
Highlighted
Shopify Partner
5 1 2

Try this:

HTML

<div class="outer-wrapper">
  <div class="video-wrapper">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/<ID>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
  </div>
</div>

CSS

.outer-wrapper {
/* Limit width and centre horizontally */ max-width: 560px; margin: auto; } .video-wrapper {
/* Set context for absolutely positioned child and force the aspect ratio of this element to 16:9 */
position: relative; padding-bottom: 56.25%; } .video-wrapper iframe {
/* fit the video into the parent element completely */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
1 Like
Highlighted
Tourist
8 0 0

Thank you! That works to centre it and keep it smaller than full-width. Now the only problem is that there's a huge amount of whitespace below it. I tried adding a max-height line to outer-wrapper, and that worked for the desktop view, but it still leaves a lot of space below the video in mobile view.

0 Likes
Highlighted
Shopify Partner
5 1 2

This is an accepted solution.

It looks like you now have two video-wrappers in the rendered HTML.

Developer toolsDeveloper tools

Whatever theme you have is automatically wrapping the youtube iframe in the video wrapper element. This might work:

<div class="outer-wrapper">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/<ID>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
</div>
1 Like
Highlighted
Tourist
8 0 0

That solved it! I'm using the Debut theme. Thanks so much!

0 Likes