YouTube Embed

Simple Table containing multiple videos with start/stop times

by Spero Koulouras

HTML

<body>

  <div name="playback">
    <iframe name="viewer" width="480px" height="270" src="" frameborder=3 allowfullscreen></iframe>
  </div>

  <table>
    <tr>
      <th>Inning</th>
      <th>Batter</th>
      <th>Pitcher</th>
      <th>Pitch</th>
      <th>Code</th>
      <th>Detail</th>
      <th>Press Box</th>
      <th>CF</th>
      <th>Batter</th>
      <th>1B Cam</th>
    </tr>
    <tr>
      <td>1</td>
      <td>A</td>
      <td>Schiek</td>
      <td>4</td>
      <td>FO</td>
      <td>Fly Out</td>
      <td><button class="videolink" data-id="bYfCmFYuNi8" data-start=2302 data-end=2312)>Press Box</button></td>
      <td><button>CF</button></td>
      <td><button>Batter</button></td>
      <td><button>1B Cam</button></td>
    </tr>
  </table>
</body>

JavaScript

document.addEventListener("DOMContentLoaded",function(){
    alert('DOMContentLoaded');
});

/*
document.addEventListener("DOMContentLoaded", function(event) { 
/*
const buttons = document.querySelectorAll('.videolink')
console.log("DOMContentLoaded")
buttons.forEach(function(currentBtn){
	console.log("Added Listener")
  currentBtn.addEventListener('click', playClip)
})});
alert("DCL")
})
*/

function playClip() {
	console.log("id: " + evt.target.dataset.id)
	document.getElementById("viewer").src = "https://www.youtube.com/embed/" + 
      id + "?start=" + start + "&end=" + end + "&autoplay=1;mute=1;rel=0;modestbranding=1" 
}