JSFiddle - React, Tailwind, and code Playground

by John Barker

HTML

<p id="areWeLive" class="align-text-center"></p>

CSS

.videoWrapper {
  position: relative;
  padding-bottom: 53.25%;
  /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 99%;
  height: 100%;
}
.align-text-center{
  text-align:center;
}

JavaScript

var streamingStatus = "ON";
var eventTitle = "EVENT TITLE - live stream";
var eventSubtitle = "A little more information about the event";
var eventURL = "http://heretorecord.co.uk";

var streamEmbed = '<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLuw5c6eMnCc9rShPDDZky5d5RigsGUPuX&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>';
var output = "";



if (streamingStatus == "ON") {
  output += '<h1>' + eventTitle + '</h1><h2>' + eventSubtitle + '</h2> Learn more about this event <a href="' + eventURL + '" target="_blank"> right here</a><br /><br /><br /><div class="videoWrapper"><' + streamEmbed + '</div>';
} else {
  output += '<h1>Live streaming</h1>It looks like we are not streaming live right now, but check back again soon!<br /><br />';
}

document.getElementById("areWeLive").innerHTML = output;