在Bootstrap5中，如何將視頻設定為居中覆寫文本的底部？

在 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

研究：

• 如何在 Bootstrap 輪播中設定影像的最大寬度并保持縱橫比？
• 最大高度 div 在 css 和 bootstrap 5 中不起作用
• 在引導程式中將大小設定為回應式 iframe
• 如何將最大高度應用于 iframe 但將其保持在 100% 寬度？

題：

在 Bootstrap 5 中，我怎樣才能擁有最大高度的視頻，在將視頻捕捉到底部的同時保持覆寫中的居中文本div？

uj5u.com熱心網友回復：

使用 Bootstrap 5，您不必在 iframe 上添加 CSS，因為您ratio在父 div 上有類。另外我相信您需要更改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 類：

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

標籤：css 视频 覆盖 引导程序 5

上一篇：如何將尺寸從未知寬度更改為100%？

下一篇：LED電子時鐘屏（時間同步屏）與NTP網路時鐘系統組成