Adaptive mosaic of videos and pictures using flex - css

Question

Using flex, I would like to display an adaptive mosaic of Videos and Pictures, so each time I will add a new video or picture, the Tile will auto adjust.
Here is an exemple of what I m looking for:
[NOTE]: all the Tiles are the same width and height :)
Here is the HTML code:
[NOTE]: I didnt find how to make work flex on StackOverflow.
.flex-container {
display: flex;
background-color: Green;
flex-wrap: wrap;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 10;
}
.flex-container > div {
background-color: pink;
height:100%;
}
.flex-container > div > div.image {
background-image: url("https://www.gettyimages.ca/gi-resources/images/EnterpriseSolutions/StandOut_Creative.jpg");
background-position: center right;
background-size: cover;
width:100%;
height:100%;
}
<div class="flex-container">
<div style="width:50%">
<div class="image"></div>
</div>
<div style="width:50%">
<div class="image"></div>
</div>
<div style="width:50%">
<div class="video">
<video src="http://link.to.video.mp4" autoplay loop muted></video>
</div>
</div>
<div style="width:50%">
<div class="image"></div>
</div>
</div>
So In the wrap flex-container, I have "image" div where the Image is in Background. And "video" div.
I found the way the auto adjust the image, but I dont how to do the same for the video.
Did you find a way to auto adjust video in wrap container?
Thanks.

Answer 1

Your flexbox code is okay (by default, the flex direction is by row, and it wraps on multiple lines to give the mosaic effect). The main problem is the position property in the main container. I removed the fixed position property, along with the associated containers.
/* Main Container */
.flex-container {
display: flex;
/* flex-direction: row; <-- Value by default */
flex-wrap: wrap;
width: 100%;
z-index: 10;
background-color: green;
}
I´ve also removed the height on both the main container and the direct children. As for the heights of the <div> with the .image class, i replaced the percentage value with a vh value. Let's define the element in the mosaic taking the full height of the viewport with the value 100vh.
/* Image Container */
.flex-container > div > div.image {
background-image: url("https://www.gettyimages.ca/gi-resources/images/EnterpriseSolutions/StandOut_Creative.jpg");
background-position: center right;
background-size: cover;
width:100%;
height:100vh; /* <-- Height is full height of the viewport */
}
Let´s tackle the video issue. Maintaining the conditions in the HTML code, I've defined CSS for both the video container and the video element, Both will take the same width and height as the <div> elements with the .image class (100% width, 100vh height).
To adjust the video to take the entire size of the container, in it I used the object-fit property, with the value fill.
/* Video Container */
.flex-container > div > div.video {
width: 100%;
height: 100vh;
}
/* Video Element */
.flex-container > div > div.video video {
width: 100%;
height: 100vh;
object-fit: fill; /* <-- The video fills the entire video container */
}
Code Snippet
The mosaic is in action in the snippet below. Note that:
I added margin zero and padding zero to the entire page for aesthetic reasons.
The video elements feature a sample MP4 video.
Your original code has four mosaic elements, the snippet below has six. Along with the four original elements, there are two more. You can play with it and see the mosaic adjusts itself with the present elements.
* {
margin: 0;
padding:0;
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
width: 100%;
z-index: 10;
background-color: green;
}
.flex-container > div {
background-color: pink;
}
.flex-container > div > div.image {
background-image: url("https://www.gettyimages.ca/gi-resources/images/EnterpriseSolutions/StandOut_Creative.jpg");
background-position: center right;
background-size: cover;
width:100%;
height:100vh;
}
.flex-container > div > div.video {
width: 100%;
height: 100vh;
}
.flex-container > div > div.video video {
width: 100%;
height: 100vh;
object-fit: fill;
}
<div class="flex-container">
<div style="width:50%">
<div class="image"></div>
</div>
<div style="width:50%">
<div class="image"></div>
</div>
<div style="width:50%">
<div class="video">
<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop muted></video>
</div>
</div>
<div style="width:50%">
<div class="image"></div>
</div>
<div style="width:50%">
<div class="image"></div>
</div>
<div style="width:50%">
<div class="video">
<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay loop muted></video>
</div>
</div>
</div>