When using Bootstrap 5, I am facing a challenge with a video on the index page that plays beneath the navigation. I want to maintain the 16x9 aspect ratio and have centered text overlayed on the video. However, I encounter an issue when attempting to 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&autoplay=1&mute=1&modestbranding=0&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&autoplay=1&mute=1&modestbranding=0&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:
Is there a way in Bootstrap 5 to set a maximum height for a video, maintain centered text overlay, and anchor the video to the bottom of the div?