In Bootstrap 5 I have a video on the index page that plays below the navigation. I'd like to keep the 16x9 aspect ratio and allow for text to be centered overlayed on the video but I'm running into an issue when I try set a maximum height.

HTML:

<section className="hero-video">
  <div className="ratio ratio-16x9">
    <div className="overlay-text">
      <h1>Foo Bar</h1>
    </div>
    <iframe
      src="https://youtube.com/embed/wxL8bVJhXCM?controls=0&amp;autoplay=1&amp;mute=1&amp;modestbranding=0&amp;showinfo=0"
      frameBorder="0"
      allow="autoplay; encrypted-media"
      title="video"
      style={{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        height: '100%',
        margin: '0 auto',
      }}
    ></iframe>
  </div>
</section>

CSS:

.hero-video {
  position: relative;
  overflow: hidden;
  max-height: 600px;
}
.overlay-text {
  position: absolute;
  background-color: rgba(58, 57, 57, 0.5);
  z-index: 10;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.overlay-text h1 {
  color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

Full Component:

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'

const Hero = () => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            description
            hero
          }
        }
      }
    `,
  )

  const description = site?.siteMetadata?.description
  const hero = site?.siteMetadata?.hero

  return (
    <section className="hero-video">
      <div className="ratio ratio-16x9">
        <div className="overlay-text">
          <h1>{description}</h1>
        </div>
        <iframe
          src={`https://youtube.com/embed/${hero}?controls=0&amp;autoplay=1&amp;mute=1&amp;modestbranding=0&amp;showinfo=0`}
          frameBorder="0"
          allow="autoplay; encrypted-media"
          title="video"
          style={{
            position: 'absolute',
            bottom: 0,
            width: '100%',
            height: '100%',
            margin: '0 auto',
          }}
        ></iframe>
      </div>
    </section>
  )
}

export default Hero

Research:

• How do I set max-width for an image in Bootstrap carousel and keep aspect ratio?
• Max height div not working in css and bootstrap 5
• set size to responsive iframe in bootstrap
• How can I apply a max-height to an iframe but keep it at 100% width?

Question:

In Bootstrap 5 how can I have a max height video, keep centered text from the overlay while snapping the video to the bottom of the div?

CodePudding user response：

With Bootstrap 5, you shouldn't have to add the CSS on the iframe, since you have the class ratio on the parent div. Also I believe you need to change the order of your overlay-text element and add a little bit of CSS, like so:

<section className="hero-video">
  <div className="ratio ratio-16x9">
    <iframe
      src="https://youtube.com/embed/wxL8bVJhXCM?controls=0&amp;autoplay=1&amp;mute=1&amp;modestbranding=0&amp;showinfo=0"
      frameBorder="0"
      allow="autoplay; encrypted-media"
      title="video">
    </iframe>
  </div>
  <div className="overlay-text">
    <h1>Foo Bar</h1>
  </div>
</section>

Add top/left to overlay-text class as well:

.overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(58, 57, 57, 0.5);
  z-index: 10;
  width: 100%;
  height: 100%;
  overflow: hidden;
}