Bootstrap-5 video embed responsive-CodePudding

I'm struggling with Bootstrap responsive Video embeding. Somehow, the parent container is not responsive , only the <iframe> content is responsive. Any idea what Am I doing wrong?

.embed-responsive-item {
  height: 100%;
  width: 100%;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
  <div >
    <h1>TITLE</h1>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi, nemo? Recusandae doloribus cupiditate repellendus saepe exercitationem soluta possimus inventore atque! Nesciunt totam, consectetur doloremque corrupti quos dolorem explicabo debitis. Dicta
    similique quisquam officia esse! Magni vitae, assumenda porro natus aliquid omnis sequi facere modi accusamus veniam. Impedit repellat modi reiciendis sapiente dicta! Impedit aperiam repellat veniam, quos ex praesentium. Necessitatibus, est sequi
    fugiat, nostrum deserunt architecto optio harum, ipsa odit atque expedita! Cumque, doloribus. Quidem a laudantium ipsum fugit amet. Natus, iusto! Nesciunt voluptate enim laboriosam suscipit molestias qui dicta, illo, possimus totam nihil, doloribus
    ullam ad est quasi architecto!
  </div>
  <div >
    <div >
      <iframe  src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
  </div>
</div>

Thank you for your help ! Regards

CodePudding user response：

Before you check responsive you will wrap .row div to .container div Example: https://codesandbox.io/s/zealous-colden-7bxpn5?file=/index.html

CodePudding user response：

you must know before anything else that bootstrap is responsive by nature just use the correct way.

in this code you miss container class before row tag

<!DOCTYPE html>
<html>
<head>
<title>Embedded Video</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

</head>
<body>
<div >
<div >
  <div >
    <h1>TITLE</h1>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi, nemo? Recusandae doloribus cupiditate repellendus saepe exercitationem soluta possimus inventore atque! Nesciunt totam, consectetur doloremque corrupti quos dolorem explicabo debitis. Dicta
    similique quisquam officia esse! Magni vitae, assumenda porro natus aliquid omnis sequi facere modi accusamus veniam. Impedit repellat modi reiciendis sapiente dicta! Impedit aperiam repellat veniam, quos ex praesentium. Necessitatibus, est sequi
    fugiat, nostrum deserunt architecto optio harum, ipsa odit atque expedita! Cumque, doloribus. Quidem a laudantium ipsum fugit amet. Natus, iusto! Nesciunt voluptate enim laboriosam suscipit molestias qui dicta, illo, possimus totam nihil, doloribus
    ullam ad est quasi architecto!
  </div> <!-- end of col md 6 -->
  <div >
    <div >
      <iframe  src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div> 
  </div> <!-- end of col md 6 -->
</div> <!-- end ofrow -->
</div> <!-- end of container -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>