Responsive Video Embed Using Bootstrap-5

I'm facing some challenges with Bootstrap responsive video embedding. It seems like the parent container is not responding to changes, only the content within the <iframe> tag is being responsive. Any idea what might be going wrong?

.embed-responsive-item {
  height: 100%;
  width: 100%;
}
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3835352e292e283b2a1a6f7468746a">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6c4c9c9d2d5d2d4c7d6e69388948896">[email protected]</a>/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>

Appreciate any assistance you can provide! Best regards

htmlcssbootstrap-5video-embedding

Answer №2

It is important to understand that bootstrap is inherently responsive, so make sure to use it correctly.

In the provided code snippet, the container class is missing before the row tag.

<!DOCTYPE html>
<html>
<head>
<title>Embedded Video</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68398849886">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e25222523302111647f637f61">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with traversing from parent to children elements using jQuery selectors

<form data-v-c4600f50="" novalidate="novalidate" class="v-form"> <div data-v-c4600f50="" class="pr-2" question="Top Secret4"> <div data-v-c4600f50="" f ...

javascripthtmljquerycss

Set up a cronjob based on the specified time entered in an HTML form

For my HTML form, users enter a time in HH:mm format. I aim to set up a cronjob on the system that will automatically delete a specific file based on the user-provided time. The file itself always remains constant, with only the deletion time varying. Th ...

javascripthtmlnode.jscron

Ways to customize the alignment of nav-link items in Bootstrap 4

I am using Bootstrap 4 and have a set of three nav-link elements: <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Item1</a> </li> <li class="nav-item"> <a class="nav ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Trying to create a customized PACS viewer for scrolling through a series of CT head images. However, encountering an issue with scrolling through all 59 images. Currently, able to scroll from the first to the 59th image, but struggling to loop back to the ...

jquerycss

Unable to apply styling to body element in style.css file when using Node.js

I recently launched a basic Node.js website but encountered an unusual issue. When trying to style the body using the default style.css stylesheet provided by Express, I found that it was not recognizing it. The only workaround was to add the class body di ...

htmlcssnode.jsexpressmean-stack

Show the extracted data on the following web page once it has been cleaned

I am looking to connect a python file with an HTML page using Flask application. On the first page (upload.html), the user is required to select the job field and job title from two dropdown menus. Afterwards, the user needs to upload a file containing a l ...

pythonhtmlpandasflask

Alignment of inputs remains stubbornly off-center despite floating left

My main goal is to have all my inputs aligned to the left for a clean and organized look, similar to the image provided below: https://i.sstatic.net/5c0mX.png Despite my efforts to float the inputs and paragraphs to the left, I am facing an issue where t ...

htmlcss

What could be causing Bootstrap to fail in my Angular implementation?

It seems like I have successfully imported everything... angular.json: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects ...

angularbootstrap-5

Trying to toggle between two Angular components within the app component using a pair of buttons

Currently, I am developing an application that requires two buttons to display different nested apps. Unfortunately, I am unable to use angular routing for this particular design. These two buttons will be placed within the app.component. When Button A i ...

javascripthtmlangularprimeng

Handling a change event for a mat-datepicker in Angular 7 can be tricky, especially when its value is tied to an optional input parameter. Let's dive into how to

I've recently started working with angular development and encountered a challenge with a mat-datepicker. The value of the datepicker is connected to filterDate using [(ngModel)] as an @Input() parameter. I have implemented a handleChange event that e ...

javascripthtmlangulartypescriptdatepicker

`How to implement text that changes dynamically within images using HTML and PHP`

I'm working on a PHP website with Codeigniter and I have a requirement to insert HTML text into an image fetched from a database. The content of the text will vary based on different profiles. Below is the image: The text "$40" needs to be dynamic. H ...

javascriptphphtmlcodeigniter

Utilize flexbox to create a list that is displayed in a column-reverse layout

I am facing a challenge in displaying the latest chat person in the 1st position (active) using Firebase. Unfortunately, Firebase does not have a date field which makes it difficult to achieve this. I have attempted converting the date into milliseconds an ...

javascripthtmlcssfirebaseflexbox

What methods can I implement to prevent my boxes from becoming stretched out?

How can I prevent this box from stretching too much? Here is the code snippet along with the output: CSS: .social { padding-left: 1000px; border: 5px inset black; margin: 4px; width: 100px; } HTML: <div class="social"> <p& ...

htmlcssweb

Is it possible to create an input field exclusively for tags using only CSS?

I am currently facing some limitations with a website I am managing. Unfortunately, I do not have the ability to incorporate additional libraries such as custom jQuery or JavaScript scripts. My goal is to customize an input field for tags so that when us ...

javascriptjqueryhtmlcsstags

Troubleshooting Bootstrap select box design discrepancies

Currently revamping a website and encountered an unusual issue with select boxes. There seems to be an overlapping white space where the option values should be. Here's a visual reference: View Image of Select Box Issue Utilizing Bootstrap for the re ...

javascriptjqueryhtmlcsstwitter-bootstrap

Convert all SASS code into CSS within a Nuxt project

I am currently tackling a project that involves using SASS for part of the code. However, I have made the decision to transition from SASS to vanilla CSS. My goal is to find a way to convert all SASS segments into CSS either programmatically across the ent ...

cssvue.jssassnuxt.jsnuxt3.js

Can you please specify the type of values being entered as input?

Query: How do I identify the data type of the value entered in an input field? Whenever I use typeof, it always returns string unless the string is empty. I searched various forums extensively but couldn't find a solution. Can someone assist me with t ...

javascripthtml

Gradient background overlaid with a blended SVG shape

Creating a full gradient background with a clipping mask can be tricky. I used an SVG to achieve the desired shape by cutting part of the background color, but now I'm facing a challenge with blending the colors seamlessly. I tried setting the SVG co ...

htmlcsssvg

The issue of Bootstrap icons not displaying on the front-end arises when integrating them into a Vuejs Template

I'm in the process of constructing a web application using Vue.JS. I've integrated the [Bootstrap Icons][1] into my application, but for some reason, the icons are not showing up on the screen. Here are the steps I followed: Installed Bootstrap ...

htmlcsstwitter-bootstrapbootstrap-4vuejs2

I am attempting to adjust the color of the active tab, but I seem to be encountering issues in my code. Can anyone help me

The currently active tab should change along with the text inside the box, but it's not working as expected. I'm struggling to find out why. Here is a fiddle to demonstrate my progress so far: var btn1 = document.getElementById("btn1"); va ...

javascripthtml