Live Stream Break Screen

HTML

<div class="headings"></div>



<div class="schedule">
  <div class="tableHead">
  <span class="comingUp">Coming up </span>
  
  <div id="countdown"></div>
</div>
  
  </div>

<div class="logo"></div>

CSS

body{
  background-color:#000;
}

.floatleft {
  float: left;
  clear: left;
  padding: 20px;
  margin-bottom: 40px;
}

.item {
  height: 150px;
  padding: 20px;
}

.text {
  padding: 20px;
}

.talkTitle {
  font-size: 30px;
  font-weight: 900;
}

.talkSpeaker {
  font-size: 20px;
  font-weight: 600;
}

.talkTime {
  font-size: 20px;
}

.headings {
  text-align: center;
  margin-bottom: 100px;
  color: #fff;
  line-height: 100px
}

.breakHeading {
  font-size: 80px;
}

.breakSubHeading {
  font-size: 45px;
}

.schedule {
  color: #fff;
}
.comingUp {
  text-align: left;
    color: #fff;
    line-height: 55px;
    font-size: 25px;
    width: 500px;
    background-color: ;
    padding: 15px;
}
.item{
    height: 150px;
    padding: 20px;
    background-color: #1b1b1b;
    margin: 10px;
}
#countdown {
text-align: left;
float:right;
    color: #fff;
    font-size: 25px;
    width: 100px;
    padding: 11px;
    background-color: red;
}
.tableHead {
 background-color: red; 
 margin-left:10px;
 margin-right: 10px;
}
.logo {
  float:right;
  margin-right:10px;
}

JavaScript

//GOOGLE SPREADSHEET TO WEBSITE schedule
//IMPORTANT - On your sheet, make sure you "file">"Publish to the web" 


var url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTkdBr8kLYJwCxE-CWWqrkxy9PksC9bPJK0Vcjmkbz3-gWQuzdwZtkNW4Sx7YLUeDKs_JepxZt95R29/pubhtml";

$.getJSON(url, function(data) {
  var outputSchedule = "";
  var outputHeadings = "";
  var outputLogo = "";
  var i;

  $.each(data.feed.entry, function(index, value) {
    if (value.gsx$realtime.$t == "Future" && value.gsx$order.$t < 3 && value.gsx$order.$t > 0) {
      outputSchedule += "<div class='item'><div class='customimage floatleft'><img src='" + value.gsx$image.$t + "'></div>" +
        "<p><div class='text'><span class='talkTitle'>" + value.gsx$title.$t + "</span></br>" +
        "<span class='talkSpeaker'>by " + value.gsx$name.$t + "</span>" +
        "<span class='talkTime'> at " + value.gsx$timeonly.$t + " (" + value.gsx$timezone.$t + ")</span></br>" +
        "<style>" + value.gsx$css.$t + value.gsx$logocss.$t + "</style></p></div></div>";
        

      if (value.gsx$realtime.$t == "Future" && value.gsx$order.$t < 2 && value.gsx$order.$t > 0) {
        outputHeadings += "<span class='breakHeading'>" + value.gsx$heading.$t + "</span></br>" +
          "<span class='breakSubHeading'>" + value.gsx$subheading.$t + "</span>";
          outputLogo += "<div class='customLogo'><img src='" + value.gsx$logo.$t + "'></div>";
      };
      if (value.gsx$realtime.$t == "Future" && value.gsx$order.$t == 1) {
        CountDownTimer(value.gsx$timetwelve.$t, 'countdown');


        function CountDownTimer(dt, id) {
          var end = new Date(dt);

          var _second = 1000;
          var _minute = _second * 60;
          var _hour = _minute * 60;
          var _day = _hour * 24;
          var timer;

          function showRemaining() {
            var now = new Date();
            var distance = end - now;
            if (distance < 0) {

              clearInterval(timer);
             ...