JSFiddle - React, Tailwind, and code Playground

by Mark

HTML

<div id="videos">
  <div class="videos-items">
  
    <div class="js-video">
      <div class="video">
        <div class="video-wrapper">
          <video video-id="1" autoplay="" playsinline="">Your browser does not support the video tag...</video>
        </div>
      </div>
    </div>

    <div class="js-video">
      <div class="video">
        <div class="video-wrapper">
          <video video-id="2" autoplay="" playsinline="">Your browser does not support the video tag...</video>
        </div>
      </div>
    </div>
    
    
    <div class="js-video">
      <div class="video">
        <div class="video-wrapper">
          <video video-id="3" autoplay="" playsinline="">Your browser does not support the video tag...</video>
        </div>
      </div>
    </div>
    
    
    <div class="js-video">
      <div class="video">
        <div class="video-wrapper">
          <video video-id="4" autoplay="" playsinline="">Your browser does not support the video tag...</video>
        </div>
      </div>
    </div>
    
    
    <div class="js-video">
      <div class="video">
        <div class="video-wrapper">
          <video video-id="5" autoplay="" playsinline="">Your browser does not support the video tag...</video>
        </div>
      </div>
    </div>
    
    
    <div class="js-video">
      <div class="video">
        <div class="video-wrapper">
          <video video-id="6" autoplay="" playsinline="">Your browser does not support the video tag...</video>
        </div>
      </div>
    </div>
                            
              
  </div>
</div>

CSS

.videos-items{
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.videos-items.hidden {
    display: none;
}
.videos-items>.js-video {
    width: 100%;
}
.video>.video-wrapper:before {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 75%;
    border:1px black solid;
}
.js-video>video {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    background: black;
}
.video>div>video {
      position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
}

JavaScript

setInterval(()=>{
// You can add/remove element now and update after!
UpdateVideo();

}, 5000); // Let's automate this for visuals

function UpdateVideo() {
    let videos = document.querySelector("#videos"); // The parent element containing your videos
    let elem = videos.querySelectorAll(".videos-items"); // All the video elements
    if (elem !== undefined) { // If no videos don't run at all
        for (let index = 0; index < elem.length; index++) {
            if ("object" != typeof elem[index]) continue; // safety to not render further video
            // Sometimes the video element is not actually visible say an unrendered embed, let's not consider it in our calculations!
            let child = videos.querySelectorAll(".videos-items:nth-child(" + (index + 1) + ") > .js-video:not(.hidden)");
            // Let's be very bad now and resize all the videos
            if (child.length) ResizeVideo({ wrapper: elem[index], height: elem[index].clientHeight, width: elem[index].clientWidth, childs: child });
        }
    }
}

function ResizeVideo(a) {
    // Don't worry about all this your head will melt.
    let c = a.childs.length;
    let e = 100;
    let f = 100;
    let d = 0;
    let g = 0;
    for (; c;) {
        let d = Math.floor(a.height / c);
        let h = Math.floor(d / 0.75);
        if (h > a.width) {
            h = a.width;
            d = Math.floor(0.75 * h);
        }
        let i = Math.floor(a.width / h);
        for (; i * c < a.childs.length || d * c > a.height;) {
            i++;
            h = Math.floor(a.width / i);
            d = Math.floor(0.75 * h);
        }
        let j = d * h;
        let k = a.height * a.width;
        let l = Math.floor(1e4 * ((k - j * a.childs.length) / k)) / 100;
        if (0 < l && e >= l) {
            if (1 < c && a.childs.length % i) {
                let d = i;
                for (; d;) {
                    if (Math.ceil(a.childs.length / d) > c) {
                        d++;
             ...