When I make my browser window thinner to replicate mobile sized - the images resize fine and fill 100% width...
But i can't get the videos to
I've tried using media queries, and thought maybe just using % / auto values may be simpler - but nothing seems to work. Any ideas?
<!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: whitesmoke;
margin: 0; /* Reset margin to 0 */
padding: 20px; /* Reset padding to 0 */
}
.container {
background-color: red;
margin-bottom: 50px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* Change flex direction to column */
position: relative; /* Add position relative */
margin-top: 0px; /* Add margin-top for spacing */
overflow: none;
}
.slideshow-container {
position: relative;
width: 100%;
margin: auto;
max-height: 90vh;
overflow: none;
background-color: green; /* Set default background color to transparent */
display: flex; /* Use flexbox layout */
justify-content: center; /* Center items horizontally */
align-items: center; /* Center items vertically */
}
.stage-bg {
background-color: white; /* Set background color to red for carousel items with this class */
}
.carousel-item {
text-align: center; /* Center images horizontally */
}
.slideshow-container img,
.slideshow-container iframe {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Show arrows only on hover */
.slideshow-container:hover .prev,
.slideshow-container:hover .next {
display: block;
}
.prev,
.next {
display: none;
cursor: default; /* Change cursor to default */
z-index: 1000;
color: silver;
font-weight: bold;
font-size: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: auto;
padding: 16px;
border-radius: 0 3px 3px 0;
user-select: none;
text-decoration: none; /* Remove underline */
}
.prev:hover,
.next:hover {
text-decoration: none; /* Remove underline */
color: silver; /* Change color on hover */
}
.prev {
left: 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev.disabled,
.next.disabled {
pointer-events: none;
opacity: 0.5;
}
/* Custom CSS for text boxes */
.textbox {
background-color: white;
max-width: 600px;
padding: 10px;
margin-top: 20px; /* Add margin-top for spacing */
margin-left: auto; /* Align to the right */
margin-bottom: 20px; /* Add margin-bottom for spacing */
text-align: left; /* Align text to the left */
}
.textbox p {
margin: 0;
}
</style>
</head>
<body>
<div class="container" style="max-width: 1000px">
<div id="myCarousel1" class="slideshow-container carousel" data-ride="carousel" data-interval="false">
<!-- Image Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://source.unsplash.com/random/900x600/?kitten">
</div>
<div id="artists" class="carousel-item" style="padding: 20px">
<iframe src="https://player.vimeo.com/video/335205129?h=1e30c728b8&title=0&byline=0&portrait=0" width="640" height="640" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
<div id="nochill" class="carousel-item" style="padding: 20px">
<iframe src="https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0" width="800" height="450" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- Navigation Arrows -->
<a class="prev" href="#myCarousel1" data-slide="prev">❮</a>
<a class="next" href="#myCarousel1" data-slide="next">❯</a>
</div>
<!-- Textbox -->
<div class="textbox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nulla posuere, justo ut lacinia fermentum, nulla purus lacinia enim.</p>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>This is related to another question that I have answered before, where the video would not take the full width of the carousel. So this has a similar solution.
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% just like the last question.
HTML:
<!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: whitesmoke;
margin: 0; /* Reset margin to 0 */
padding: 20px; /* 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;
max-height: 90vh;
overflow: none;
background-color: green; /* Set default background color to transparent */
display: flex; /* Use flexbox layout */
justify-content: center; /* Center items horizontally */
align-items: center; /* Center items vertically */
}
.stage-bg {
background-color: white; /* Set background color to red for carousel items with this class */
}
.carousel-item {
text-align: center; /* Center images horizontally */
}
/* Custom CSS for text boxes */
.textbox {
background-color: white;
max-width: 600px;
padding: 10px;
margin-top: 20px; /* Add margin-top for spacing */
margin-left: auto; /* Align to the right */
margin-bottom: 20px; /* Add margin-bottom for spacing */
text-align: left; /* Align text to the left */
}
.textbox p {
margin: 0;
}
/* 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" data-ride="carousel" data-interval="false">
<!-- Image Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://source.unsplash.com/random/900x600/?kitten" 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>
<!-- Navigation Arrows -->
<a class="prev" href="#myCarousel1" data-slide="prev">❮</a>
<a class="next" href="#myCarousel1" data-slide="next">❯</a>
</div>
<!-- Textbox -->
<div class="textbox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nulla posuere, justo ut lacinia fermentum, nulla purus lacinia enim.</p>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>