JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<div class="filler filler-top">filler top</div>
<div class="video-container">
  <iframe data-src="https://www.youtube.com/embed/f0JDs4FY8cQ?rel=0&autoplay=1"></iframe>
</div>
<div class="filler filler-btm">filler bottom</div>









 <a class="stacklink" href="http://stackoverflow.com/questions/43947501/">Stack Overflow Question</a>

CSS

body {
  margin: 0;
}
.filler {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}
.filler-top { background-color: blue }
.filler-btm { background-color: green; }
.video-container {
  /* css tricks - responsive iframe video */
  /* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
  position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
  display: flex;
  justify-content: center;
  background-color: red;
}
.video-container iframe {
  position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}










/* link to stack question */
.stacklink {
  position: fixed;
  bottom: 0;
  left: 50%; transform: translateX(-50%);
  display: inline-flex;
  padding: 2px 4px;
  text-decoration: none;
  color: hsl(0, 0%, 70.6%);
  background-color: hsl(0, 47.3%, 43.9%);
}
.stacklink:hover {
  background-color: hsl(207.7, 47.7%, 43.5%);
}

JavaScript

$(window).scroll(function() {
  $.each($('iframe'), function() {
    if ( $(this).attr('data-src') && $(this).offset().top < ($(window).scrollTop() + $(window).height() + 100) ) {
      var source = $(this).data('src');
      $(this).attr('src', source);
      $(this).removeAttr('data-src');
    }
  })
})