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&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>