Bootstrap-5 video embed responsive

Question

Bootstrap-5 video embed responsive

1.2k views Asked by Márton Stark At 10 August 2022 at 12:59

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 class="row">
  <div class="col-md-6">
    <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 class="col-md-6">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
    </div>
  </div>
</div>

Thank you for your help ! Regards

Original Q&A

There are 2 answers

**Amol** · Answer 1 · 2022-08-10T13:11:58+00:00

Amol On 10 August 2022 at 13:11

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

**AudioBubble** · Answer 2 · 2022-08-10T13:20:09+00:00

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 class="container-fluid">
<div class="row">
  <div class="col-md-6">
    <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 class="col-md-6">
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" 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>

TechQA.

Bootstrap-5 video embed responsive

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in BOOTSTRAP-5

Related Questions in VIDEO-EMBEDDING

Popular Questions

Popular Tags

Trending Questions