Embedded video not working inside section tag

I am working on something which I thought was going to be simple, but for some reason the CSS is not cooperating as I expect.

https://codepen.io/rmdawson/pen/Xwypyr

In the above pen, I have an embedded youtube video and a google map which I have embedded into two different sections. If I comment out the section tags (opening and closing) for each, it displays exactly how I expect. However, I need these in the sections as I have other content (which I have removed to simplify this example). I am sure it is something very simple and just needs another set of eyes on it.

I am going for a run to clear my mind. Hopefully when I return, a CSS guru will have responded to tell me what I have wrong here.

Thanks in advance

How about adding width: 100%; to .video-wrap and .map-responsive?

1 Like

@RandellDawson I believe the problem is flexbox.
I removed .map from the section where you are applying flexbox.
flexbox can sometimes have an unexpected effect on items.

Before:

.virtual-tour, .map {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
  padding: 2rem 4rem 1rem 4rem;
  width: 100%;
  color: var(--blue-main);
}

After:

.virtual-tour {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
  padding: 2rem 4rem 1rem 4rem;
  width: 100%;
  color: var(--blue-main);
}

I then uncommented the section and the page appeared to look okay.

@kevcomedia Adding width: 100% to those classes made the difference.

Thanks.

1 Like