Scale images & HTML5 videos to fit a row with an equal height

Question

I have a bit of a problem with a gallery. I'm trying to fit images & videos in a row and have them keep an equal height.

\n

I could achieve that with the following code but only in the case of a row full of images. If I try to place a video, it doesn't work...

    var videos = document.querySelector('.gallery-video');
$(".img-row").each(function () {
    var row = $(this),
        rowItems = row.find(".gallery-item"),
        totalMarginSpace = (4 * (rowItems.length - 1)),
        itemsWidthSum = 0,
        diff,
        rowItem,
        rowItemWidth;
    videos.addEventListener('loadeddata', function() {
        rowItems.height(1000);
        for(var i = 0 ; i < rowItems.length ; i++) {
            rowItem = rowItems[i];
            rowItemWidth = $(rowItem).outerWidth();
            itemsWidthSum += rowItemWidth;
        }
        if(rowItems.length >= 3) {
            diff = (row.width() - totalMarginSpace) / itemsWidthSum;
            rowItems.height(999 * diff);
        } else {
            rowItems.height(250);
        }
    }, false);
});

Here's my HTML :

<section class="gallery-section">

<div class="img-row">
    <video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
        <source src="" type="video/mp4">
    </video>
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
</div>

<div class="img-row">
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
    <video class="gallery-item gallery-video" autoplay loop muted="muted" preload="auto" >
        <source src="" type="video/mp4">
    </video>
    <img class="gallery-item" src="" alt="" />
</div>

<div class="img-row">
    <img class="gallery-item margot" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item" src="" alt="" />
    <img class="gallery-item margot" src="" alt="" />
</div>

<div class="img-row">
    <img class="gallery-item margot" src="" alt="" />
</div>

Any ideas on how to get my code to work ? Thank you !

\n

Code updated : I replaced item.width by item.offsetWidth (as width return nothing with videos).. It's a bit better but now the rows containing the videos are smaller than the one without.

Solution found ! Thanks for all your help but I really wanted to use JS to resolve my problem. Ok so it did come from the videos because they were not completely loaded yet. So I added an eventlistener. I updated my code in case anyone wants to use it.

Answer 1

Try making a table

<table>
  <tr>
    <th>your imgs</th>
    <th>your videos</th>
    ...
  </tr>
 </table>

then try to adjust the table with responsive CSS with this tutorial . I don't know if I understood your problem but I hope this helps.

Answer 2

This can be done using bootstrap. Use the col-md-x concept.
The complete tutorial for this is available at https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp .

Please go through this link https://bootsnipp.com/tags/gallery .
I hope this will help you. Some excellent templates are given here. It will definitely give you a good starter code.