I've inserted a tall video into this bootstrap carousel.
The video on the second slide is not a standard bootstrap size - it's 4x5. To address this, I used custom code:
class="vidbox embed-responsive embed-responsive-4by5"
/* Custom aspect ratio for 4x5 video */ .embed-responsive-4by5 { padding-bottom: 125%; /* 5/4 aspect ratio */ }
The video scaling is working properly, but I'm unable to set a maximum height such as 900px or 90vh.
- I've attempted to add a max height to the iframe and all surrounding divs.
- Unfortunately, nothing seems to be working - the video won't scale to the set max height and remain within the container.
Any suggestions?
Below is the latest code:
- Check out the second slide with the tall video - it's exceeding the desired height without the ability to set a maximum height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title>Multiple Responsive Slideshows</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: violet;
margin: 10px; /* Reset margin to 0 */
padding: 0; /* Reset padding to 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 */
...