JSFiddle - React, Tailwind, and code Playground

by Shan Eapen Koshy

HTML

<div>
<iframe class="latestVideoEmbed" vnum='0' cid="UCBJycsmduvYEL83R_U4JriQ" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<p id="video-title">Lorem ipsum</p>
</div>

<div>
<iframe class="latestVideoEmbed" vnum='1' cid="UC0xXUfNSFQN3qOmf_G_nT5w" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<p id="video-title">Lorem ipsum</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

CSS

p#video-title {
  font-weight: bold;
  background: #ffc107;
  padding: 5px 4px;
  font-family: serif;
  text-align: center;
  display: block;
  width: 70%;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 20px;
}

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;
      var title=data.items[videoNumber].title;
      id = link.substr(link.indexOf("=") + 1);
      iframe.setAttribute("src", "https://youtube.com/embed/" + id + "?controls=0&autoplay=1");
      iframe.parentElement.querySelector("#video-title").innerText = title;
    }
  );
}

var iframes = document.getElementsByClassName('latestVideoEmbed');
for (var i = 0, len = iframes.length; i < len; i++) {
  loadVideo(iframes[i]);
}