Manual DOMContentLoaded trigger

by Spero Koulouras

HTML

<body>

  <div name="playback">
    <iframe id="viewer" width="480px" height="270" src="https://www.youtube.com/embed/bYfCmFYuNi8?autoplay=0;mute=1;rel=0;modestbranding=1" 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>PB</button>
      </td>
      <td>
        <button class="videolink" data-id="2U9kgJbm2Fk" data-start=2302 data-end=2312>CF</button>
      </td>
      <td>
        <button class="videolink" data-id="rKvqPiW0hww" data-start=2294 data-end=2304>AB</button>
      </td>
      <td>
        <button class="videolink" data-id="0KxnxnRX08E" data-start=2294 data-end=2304>PI</button>
      </td>
    </tr>
  </table>
</body>

CSS

.videolink button {
  t
}

JavaScript

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

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


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