I have a web page for displaying blog post content that looks like this:
It has a few rows, one for the title (“Foo” above), one for the description (“Bar” above), and one for the body (the embedded video iframe above).
The structure around the content is supposed to horizontally center the content without using text-align:center
. If content is only one word, then that word should be centered, not appear on the far left side because technically the paragraph spans the whole page, and therefore is “centered”. In other words, the rows “hug” the content, instead of stretching to fill the entire page width.
Here is the HTML for the above page. It uses Bootstrap CSS v5.3.
<body>
<div class="container">
<div class="row">
<div class="col">
<main class="mt-3">
<article>
<div class="align-items-center d-flex flex-column mb-0">
<div class="mw-100">
<h1 class="fw-bold text-center">Foo</h1>
<p class="lead text-center">Bar</p>
</div>
<div class="mw-100">
<div class="ratio ratio-16x9">
<iframe allowfullscreen="" referrerpolicy="no-referrer-when-downgrade" src="https://www.youtube.com/embed/dQw4w9WgXcQ?hl=en&modestbranding=1"></iframe>
This works great, except for responsive videos. No matter what I try, responsive videos don’t “respond” and expand to fill the available width of the div.container, they just have the same fixed medium-like size, as can be seen above.
How do I get responsive videos to expand to be as wide as the div.container?
I’ve tried setting style="width: 100%; height: 100%"
and class="w-100 h-100"
on every tag, but the video size is unaffected.