JSFiddle - React, Tailwind, and code Playground

by not2qubit

HTML

<!DOCTYPE html>
<html>
<head>
    <title>YT Mosaic</title>
    <link href="main.css" rel="stylesheet">
</head>

<body>

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="container">
    <div class="mosaic">
        <iframe id="if1" src="https://www.youtube.com/embed/5mL-OkdM7Tc?cc_load_policy=3&autoplay=0&mute=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <!-- TRT -->
        <iframe id="if2" src="https://www.youtube.com/embed/9Auq9mYxFEE?cc_load_policy=3&autoplay=0&mute=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <!-- SKY -->
        <iframe id="if3" src="https://www.youtube.com/embed/VBTdNwm5CDY?cc_load_policy=3&autoplay=0&mute=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <!-- Global News -->
        <iframe id="if4" src="https://www.youtube.com/embed/ntmPIzlkcJk?cc_load_policy=3&autoplay=0&mute=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <!-- Euronews -->
        <iframe id="if5" src="https://www.youtube.com/embed/GE_SfNVNyqk?cc_load_policy=3&autoplay=0&mute=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <!-- DW -->
        <iframe id="if6" src="https://www.youtube.com/embed/h3MuIUNCCzI?cc_load_policy=3&autoplay=0&mute=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe> <!-- F24 -->        
    </div>

    <button onclick="iframe1play(); return false;">⏯️</button>
    <button onclick="stop();">⏹</button>
    <button onclick="playAll();">▶▶ Play All</button>
</div>

<script>

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var ifa  = [];       // array of iframe id's
    var ifos = [];       // array of iframe YT objects for use elsewhere

    // For each iframe you find, add its ID to the ifa array
    var iframes = document.querySelectorAll("div.mosaic iframe");
   ...

CSS

body {
    background-color: #404040;
    color: lightgrey;
    margin: 0;
    padding: 1em;
    /*height: 100vh;*/
    box-sizing: border-box;
}

.container {
    max-width: 1100px;  
    /*  width: 100%;*/
    border: 1px solid black;
    padding: 10px;
}

.mosaic {
    display: grid;
    /* Setup a 2x3 frame: */
    /* fr is a fractional unit and 1fr is for 1 part of the available space */
    grid-template-columns: 1fr 1fr;
    grid-template-rows:    50% 50% 50%;
    /*grid-template-rows:  1fr 1fr 1fr;*/
    max-width: 1100px;              /* 100% */
    max-height: 100%;               /* 100% */
    /*aspect-ratio: 16/9;*/         /* 16/9 */ 
    /* margin: auto; */             /* auto */
    margin-bottom: 1em;             /* 1em */
    /*padding: 2em; */
    gap: 5px;                       /* 1em */
}

iframe {
    /* iframe width="560" height="315" */
    display: block;
    width:  100%;
    height: 100%;
    aspect-ratio: 16/9;             /*  */ 
    /*min-width: 350px;*/           /* 350px */
    /*min-height: 200px;*/          /* 200px */
    background: gray;             /* yellow */ 
    border: 1px solid black;      /* border: solid red */
    margin: 0px;                    /*  */
}