I have two video embeds in a carousel. One is a standard bootstrap size (16x9), the other is a custom (4x5)
I'm using the embed-reponsive code on both, yet neither of them scale responsively to fill the container max width and height like the images do. they just stay small, always.
I've tried adding % widths on the iframe and surrounding divs, but nothing seems to work. Any ideas?
Code below (open full size to see the problem on 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&autopause=0&player_id=0&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>
</body>
</html>You can solve this is by using a wrapper div around the iframe and setting the padding-bottom to a percentage that represents the aspect ratio you want. This percentage is calculated as the height divided by the width times 100. For a 16:9 aspect ratio, this would be (9 / 16) * 100 = 56.25%. For a 4:5 aspect ratio, this would be (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>
This should make iframes take up the full width and height of their parent divs, and the videos will scale up or down while maintaining their aspect ratios.