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>