在 Bootstrap 5 中，如何设置视频样式以使其停留在底部且叠加文本居中？

Question

在 Bootstrap 5 中，我在导航下方播放的索引页上有一个视频。我想保持 16x9 的纵横比，并允许文本在视频上居中叠加，但是当我尝试设置最大高度时运行遇到了问题。

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;
}

完整组件：

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

研究：

How do I set max-width for an image in Bootstrap carousel and keep aspect ratio?
set size to responsive iframe in bootstrap
如何将最大高度应用于 iframe 但保持其宽度为 100%？

问题：

在 Bootstrap 5 中，我怎样才能拥有最大高度的视频，在将视频捕捉到 div 的底部时保持叠加层的居中文本？

Answer 1

使用 Bootstrap 5，您不必在 iframe 上添加 CSS，因为您在父 [=25] 上有 class ratio =].此外，我认为您需要更改 overlay-text 元素的顺序并添加一点 CSS，如下所示：

<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>

将 top/left 添加到 overlay-text class 以及：

.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;
}

在 Bootstrap 5 中，如何设置视频样式以使其停留在底部且叠加文本居中？

In Bootstrap 5 how can I style a video to stay at the bottom with centered overlay text?

css

video

overlay

bootstrap-5