<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<style>
.latestVideoEmbed-row {
display: flex;
flex-wrap: wrap;
}
.latestVideoEmbed-block {
position: relative;
width: 33.33%;
min-width: 300px;
flex-grow: 1;
aspect-ratio: 16 / 9;
}
.latestVideoEmbed {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<div class="latestVideoEmbed-row">
<div class="latestVideoEmbed-block"><iframe class="latestVideoEmbed" cid="UC0m0wyp07rpAd0Rmcdi7kWQ" width="600" height="340" frameborder="0" allowfullscreen></iframe></div>
<div class="latestVideoEmbed-block"><iframe class="latestVideoEmbed" vnum='2' cid="UC0m0wyp07rpAd0Rmcdi7kWQ" width="600" height="340" frameborder="0" allowfullscreen></iframe></div>
<div class="latestVideoEmbed-block"><iframe class="latestVideoEmbed" vnum='3' cid="UC0m0wyp07rpAd0Rmcdi7kWQ" width="600" height="340" frameborder="0" allowfullscreen></iframe></div>
<div class="latestVideoEmbed-block"><iframe class="latestVideoEmbed" vnum='4' cid="UC0m0wyp07rpAd0Rmcdi7kWQ" width="600" height="340" frameborder="0" allowfullscreen></iframe></div>
<div class="latestVideoEmbed-block"><iframe class="latestVideoEmbed" vnum='5' cid="UC0m0wyp07rpAd0Rmcdi7kWQ" width="600" height="340" frameborder="0" allowfullscreen></iframe></div>
<div class="latestVideoEmbed-block"><iframe class="latestVideoEmbed" vnum='6' cid="UC0m0wyp07rpAd0Rmcdi7kWQ" width="600" height="340" frameborder="0" allowfullscreen></iframe></div>
<div class="latestVideoEmbed-block"><iframe class="latestVideoEmbed" vnum='7' cid="UC0m0wyp07rpAd0Rmcdi7kWQ" width="600" height="340" frameborder="0" allowfullscreen></iframe></div>
<div class="latestVideoEmbed-block"><iframe class="latestVideoEmbed" vnum='8' cid="UC0m0wyp07rpAd0Rmcdi7kWQ" width="600" height="340" frameborder="0" allowfullscreen></iframe></div>
<div class="latestVideoEmbed-block"><iframe class="latestVideoEmbed" vnum='9' cid="UC0m0wyp07rpAd0Rmcdi7kWQ" width="600" height="340" frameborder="0" allowfullscreen></iframe></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var reqURL = "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent("https://www.youtube.com/feeds/videos.xml?channel_id=");
function loadVideo(iframe){
$.getJSON( reqURL + iframe.getAttribute('cid'),
function(data) {
var videoNumber = (iframe.getAttribute('vnum')?Number(iframe.getAttribute('vnum')):0);
console.log(videoNumber);
var link = data.items[videoNumber].link;
id = link.substr(link.indexOf("=") + 1);
iframe.setAttribute("src","https://youtube.com/embed/"+id + "?controls=0&autoplay=0");
}
);
}
var iframes = document.getElementsByClassName('latestVideoEmbed');
for (var i = 0, len = iframes.length; i < len; i++){
loadVideo(iframes[i]);
}
</script>
</body>
</html>