JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div class="videoWrapper">
  <iframe width="100%" height="620" src="https://www.youtube.com/embed/5GJCqqGqu00?start=100&amp;end=130&amp;autoplay=1&amp;mute=1&amp;controls=0&amp;loop=1&amp;disablekb=1&amp;playlist=-HSzx-zryEgM&amp;modestbranding=1&amp;showinfo=0&amp;rel=0"
    frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="" data-rocket-lazyload="fitvidscompatible" data-lazy-src="https://www.youtube.com/embed/5GJCqqGqu00?start=100&amp;end=130&amp;autoplay=1&amp;mute=1&amp;controls=0&amp;loop=1&amp;disablekb=1&amp;playlist=HSzx-zryEgM&amp;modestbranding=1&amp;showinfo=0&amp;rel=0"
    class="lazyloaded" data-was-processed="true"></iframe>
</div>

CSS

.videoWrapper {
  width: 100%;
  overflow: hidden;
  height: 550px;
}

@media (min-width: 1500px) {
  .videoWrapper {
    margin-top: -135px;
  }
}
@media (min-width: 1200px) {
  .videoWrapper {
    margin-top: -75px;
  }
}

JavaScript

setTimeout(function() {
  console.log(document.getElementById("iframe"))
}, 5000)

document.getElementById("iframe").onload = function(e) {
  console.log('hello')
}