Trouble with video embedding not adjusting properly within a Bootstrap 5 carousel

I'm currently facing an issue with two video embeds in a carousel. One has a standard bootstrap size of 16x9, while the other has a custom size of 4x5.

Even though I'm using the embed-responsive code for both videos, none of them scale responsively to fit the container's maximum width and height like the images do. They remain small at all times.

I've experimented with adding % widths to the iframe and surrounding divs, but unfortunately, nothing seems to solve the problem. Any suggestions on how to tackle this issue?

Feel free to check out the code below in full size to see the problem with both videos:

<!DOCTYPE html>
<html lang="en>
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0>
  <title>Bootstrap 5 test</title>
  <!-- Bootstrap CSS -->
  <link href="https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet>

  <style>
    body {
      background-color: lightpink;
      margin: 10px; 
      padding: 0; 
    }
    
  .container {
      background-color: green;
      margin-bottom: 50px;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center; 
    }

    .slideshow-container {
      position: relative;
      width: 100%;
      margin: auto;
      overflow: hidden;
      background-color: #b9dbe5;
      display: flex; /* Use flexbox layout */
      justify-content: center; /* Center items horizontally */
      align-items: center; /* Center items vertically */
    }
    
    .slideshow-container img, 
    .slideshow-container iframe {
      max-width: 100%;
      max-height: 85vh; /* Set maximum height */
      object-fit: contain;
    }
    
    .carousel-item {
        text-align: center; /* Center images horizontally */
    } 
    
    /* Custom aspect ratio for 4x5 video */
    .embed-responsive-4by5::before {
      padding-bottom: 125%;
    }
  </style>
</head>

<body>

<div class="container" style="max-width: 1000px;">
  <div id="myCarousel1" class="slideshow-container carousel slide" data-interval="false">
    <div class="carousel-inner">
      
      <div class="carousel-item active">
        <img src="https://source.unsplash.com/random /1200x800/?nature" alt="...">
      </div>
      
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/ 800x1200/?mountain" alt="...">
      </div> 
            
      <!-- Video Slide 1-->
      <div class="carousel-item">
        <div id="nochill" class="vidbox embed-responsive embed-responsive-16by9" style="max-width: 800px; margin: auto; text-align: center;">
          <iframe src="https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="padding: 0px;"></iframe>
        </div>  
      </div>

      <!-- Video Slide 2 -->
      <div class="carousel-item">
        <div class="phonewrapper" style="max-width: 550px; margin: auto">
          <div id="phone" class="vidbox embed-responsive embed-responsive-4by5">
            <iframe src="https://player.vimeo.com/video/912417077?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="padding: 0px" ></iframe>
          </div>
        </div>
      </div>
      
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/1000x800/?sea" alt="...">
      </div>
    </div>
  
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel1" data-bs-slide="prev">
      <img src="images/nav-l.gif" alt="Previous" style="width: 10vh">
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel1" data-bs-slide="next">
      <img src="images/nav-r.gif" alt="Next" style="width: 10vh">
    </button>
  </div>
</div>
  
<!-- Bootstrap JS -->
<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"></script>

Answer №1

To tackle this issue, create a wrapper div around the iframe and adjust the padding-bottom to a percentage that reflects the desired aspect ratio. Calculate this percentage by dividing the height by the width and multiplying by 100. For a 16:9 aspect ratio, the calculation is (9 / 16) * 100 = 56.25%. For a 4:5 aspect ratio, the calculation is (5 / 4) * 100 = 125%.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 test</title>
  <!-- Bootstrap CSS -->
  <link href="https://getbootstrap.com/docs/5.3/dist/css/bootstrap.min.css" rel="stylesheet">
  
  <style>
    body {
      background-color: lightpink;
      margin: 10px; 
      padding: 0; 
    }

    .container {
      background-color: green;
      margin-bottom: 50px;
      padding: 10px;
      display: flex;
      justify-content: center;
      align-items: center; 
    }
      
    .slideshow-container {
      position: relative;
      width: 100%;
      margin: auto;
      overflow: hidden;
      background-color: #b9dbe5;
      display: flex; /* Use flexbox layout */
      justify-content: center; /* Center items horizontally */
      align-items: center; /* Center items vertically */
    }
    .slideshow-container img, 
    .slideshow-container iframe {
      max-width: 100%;
      max-height: 85vh; /* Set maximum height */
      object-fit: contain;
    }
    
    .carousel-item {
      text-align: center; /* Center images horizontally */
    } 
      
    /* Custom aspect ratio for 4x5 video */
    .embed-responsive-4by5::before {
      padding-bottom: 125%;
    }

    .vidbox {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-bottom: 56.25%; /* for 16:9 aspect ratio */
    }

    .vidbox iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .embed-responsive-4by5 .vidbox {
      padding-bottom: 125%; /* for 4:5 aspect ratio */
    }
  </style>
</head>

<body>

<div class="container" style="max-width: 1000px;">
<div id="myCarousel1" class="slideshow-container carousel slide" data-interval="false">
  <div class="carousel-inner">
    
      <div class="carousel-item active">
        <img src="https://source.unsplash.com/random/1200x800/?nature" alt="...">
      </div>
    
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/800x1200/?mountain" alt="...">
      </div>
            
            <!-- Video Slide 1-->
      <div class="carousel-item">
        <div id="nochill" class="vidbox embed-responsive embed-responsive-16by9">
          <iframe src="https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
        </div>  
      </div>

     <!-- Video Slide 2 -->
      <div class="carousel-item">
        <div class="phonewrapper embed-responsive embed-responsive-4by5">
          <div id="phone" class="vidbox">
            <iframe src="https://player.vimeo.com/video/912417077?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
          </div>
        </div>
      </div>
      
      <div class="carousel-item">
        <img src="https://source.unsplash.com/random/1000x800/?sea" alt="...">
      </div>
    </div>
  
  
    <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel1" data-bs-slide="prev">
      <img src="images/nav-l.gif" alt="Previous" style="width: 10vh">
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#myCarousel1" data-bs-slide="next">
      <img src="images/nav-r.gif" alt="Next" style="width: 10vh">
    </button>
  </div>
</div>
  


<!-- Bootstrap JS -->
<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

Implementing this will ensure that iframes utilize the entire width and height of their parent divs, maintaining the videos' aspect ratios during scaling.

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

Alignment issues with menus

Could someone help me with aligning my register and login buttons to the right? I will provide any necessary information upon request. Please note that this is just a small part of a larger menu with additional CSS styling. PHP/ HTML: <a href="<?ph ...

Using CSS and Bootstrap together in the Yii2 framework

Hey there, I'm new to Yii2 and recently put together a layout page. However, I seem to be having some trouble with my CSS - it's not fully loading, only parts of it are displaying correctly. Is there anyone out there who can lend a hand? This is ...

What is the best way to mirror an image using CSS3?

I'm looking to create a minimalist front page for my wife's jewelry website. I envision a simple layout with a blurred background and a sleek title at the top. In the center of the page, there will be several sections dedicated to different types ...

What is the best approach to utilizing BeautifulSoup to locate all the links on a page containing the string "/pl/oferta/"?

Currently, I am delving into Python with a focus on web scraping. Specifically, I am utilizing BeautifulSoup to extract only the links from: while searching for the string "/pl/oferta/'". import logging import requests from bs4 import BeautifulSoup ...

Building a unique mobile number input box with country code in HTML

Struggling to design a unique mobile input box that separates the mobile number and country code with a divider. Need some assistance in creating this custom input field. Design https://i.sstatic.net/M0Wvs.png Current Implementation <div cla ...

By default, use jQuery to load the content of a div

Upon page load, I am looking to display the content within #destiny2. This section includes text and images, as well as additional content for three categories. Initially, the first category should be shown without requiring a click. Subsequently, clicking ...

Adding a gradient overlay to an image that has a see-through background

I am trying to achieve a unique effect where a gradient appears on the text instead of the background of an image. An example I created can be found here: https://codepen.io/BenSagiStuff/pen/BaYKbNj body{ background: black; } img{ padding: 30px; ...

Enhanced JQuery Functionality with Additional Parameters

My current class setup is as follows: <div class="photo" parameter1="custom" parameter2="custom"></div> There are a total of 4 parameters in use. I am looking for a solution to pass these parameters within my photo div for JQuery coding, whi ...

Display an Asterisk Icon for md-input fields with lengthy labels

Documentation states that md-inputs add an asterisk to the label if it is a required type. However, when input containers have width constraints and long labels, the label gets truncated and the asterisk becomes invisible. From a user experience perspectiv ...

Creating a custom HTML table layout with both variable and fixed column widths, along with grouping headers

Is there a way to format an HTML table so that it appears like this: <- full page width -> <-20px->< dynamic ><-20px->< dynamic > +------------------+-------------------+ ¦ A ¦ B ...

Transforming the appearance of the menu element in Vue using transitions

In my Vue app, I have this SCSS code that I'm using to create a smooth transition effect from the left for a menu when the isVisible property is set to true. However, I am encountering an issue where the transition defined does not apply and the menu ...

The feature in Chrome that automatically reloads generated CSS is failing to refresh the page after SASS recompiles the CSS

I'm attempting to set up Chrome's DevTools to automatically reload a page when I save changes to a watched SCSS file that compiles and updates the CSS file. Although I have checked the Auto-reload generated CSS option, it is unfortunately not fu ...

How can I insert a item into an Array using JavaScript code?

My instructor set up an array in my JavaScript file that is off limits for me to modify. My task is to add new objects to it through code without directly manipulating the existing array. Here's a snapshot of what my array contains: const words = [{ ...

Implementing a parallax scroll effect using CSS and dynamically updating the background-position value with JavaScript

How can different Y position percentages be dynamically assigned to multiple layered background images in CSS using JavaScript so that they update as the page scrolls? <style> body { background-image: url(img/bg-pattern-01.png), ur ...

Ways to create a fading effect for a div container

As I delve into learning Rails, I've been immersed in a Rails web app where there is an enticing "Order" button that triggers a response saying: "Thank you for ordering". This message is displayed using the flash action. To enhance user experience, my ...

Unable to identify the source of the additional white space appearing below the footer

Click here to access a page with two Google maps embedded. Upon scrolling to the bottom of the page, an unusual amount of whitespace is visible below the footer that is not seen on any other pages. The issue seems to be related to the presence of the two ...

Troubleshooting: Issues with Mod_rewrite affecting CSS, JS, and Image functionality

Today marks my first time posting a query in this forum. I'm currently facing an issue with mod_rewrite. Below is the structure of my filesystem: site_new/stylesheets/layout.css site_new/javascript/somescript.js site_new/hallendetails.php ...

Conceal or eliminate redundant choices in dropdown menu

I am currently working with the WebForms framework and I have encountered an issue with my dropdownlist control in one of my Forms. The Select option is sometimes being added twice, causing duplication in my form. I am looking for a way to either remove th ...

The persistent underline on the tooltip just won't go away

Hey there, this is my first time posting a question here so I hope I got everything right! I'm currently in the process of creating a form for a WordPress site using Bootstrap. I need to incorporate tooltips with Font Awesome icons, but for some reas ...

What is the best way to deactivate a hyperlink of an <a> tag specifically for a particular child within an element?

Imagine you have a clickable container that leads to another page when clicked. However, there are elements within this container that you want to disable so that clicking on them does not activate the link. How can this be achieved? For instance, ...