JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/[email protected]/slick/slick.css">
<script src="//unpkg.com/[email protected]/dist/jquery.js"></script>
<script src="//unpkg.com/[email protected]/slick/slick.min.js"></script>
<header id="main-header">
  <div id="hero-slider">

    <div class="hero-slide hero-slide-1 d-flex justify-content-center align-items-center">
      <div class="container text-light text-center">
        <h1 class="display-1">Hero Slide 1</h1>
        <h2 class="display-4">Lorem ipsum dolor sit</h2>
      </div>
    </div>

    <div class="hero-slide hero-slide-2 d-flex justify-content-center align-items-center">
      <div class="container text-light text-center">
        <h1 class="display-1">Hero Slide 2</h1>
        <h2 class="display-4">Lorem ipsum dolor sit</h2>
      </div>
    </div>

    <div class="hero-slide hero-slide-3 d-flex justify-content-center align-items-center">
      <div class="container text-light text-center">
        <h1 class="display-1">Hero Slide 3</h1>
        <h2 class="display-4">Lorem ipsum dolor sit</h2>
      </div>
    </div>

  </div>
  
  <div class="video-viewport">
  <video autoplay preload loop width="1920" height="1080">
    <source type="video/mp4" src="https://www.dropbox.com/s/pnjlnbwisbkzq0h/video.mp4?dl=1">
    <source type="video/ogg" src="https://www.dropbox.com/s/1h7382wgw198cug/video.ogg?dl=1">
    <source type="video/webm" src="https://www.dropbox.com/s/6y8hoyydoafqlce/video.webm?dl=1">
  </video>
</div>
  
</header>

<div class="container my-5">

  <h1>Fullscreen Video Intro</h1>

  <hr>

  <p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie...

CSS

html,
body,
#hero-slider,
#hero-slider .slick-list,
#hero-slider .slick-track,
#hero-slider .hero-slide {
  height: 100%;
}

#main-header {
  position: relative;
  height: 100%;
}

.hero-slide {
	position: relative;
	z-index: 0;
}

.hero-slide:after {
	background-color: rgba(0,0,0,0.7);
	position: absolute;
	content: ' ';
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: -1;
}

.hero-slide .display-1,
.hero-slide .display-4 {
	position: relative;
	will-change: transform, opacity;
	transition: all 0.3s ease;
	padding: 0.1em 0.5em;
  margin: 0;
	opacity: 0;
}

.hero-slide .display-1:after {
	transition: all 0.3s ease;
	will-change: width;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	position: absolute;
	content: ' ';
	height: 3px;
	left: 0;
	width: 0;
	bottom: -1.5px;
}

.hero-slide .display-1 {
	transform: translateY(-200%);
	transition-delay: 0.5s;
	display: inline-block;
}

.hero-slide .display-1:after {
	transition-delay: 0.8s;
}

.hero-slide .display-4 {
	transform: translateY(200%);
	transition-delay: 1.1s;
}

.hero-slide.slick-active .display-1,
.hero-slide.slick-active .display-4 {
	transform: translateY(0);
	opacity: 1;
}

.hero-slide.slick-active .display-1:after {
	width: 100%;
}

.video-viewport {
    position: absolute;
    background-color: #000;
    height: 100%;
    overflow: hidden;
    top: 0;
    z-index: -1; /* for accessing the video by click */
}

.video-viewport video {
  display: none;
}

JavaScript

var min_w = 300; // minimum video width allowed
var vid_w_orig;  // original video dimensions
var vid_h_orig;

jQuery(function() { // runs after DOM has loaded

  vid_w_orig = parseInt(jQuery('video').attr('width'));
  vid_h_orig = parseInt(jQuery('video').attr('height'));

  jQuery(window).resize(function () { resizeToCover(); });
  jQuery(window).trigger('resize');

  jQuery('video').fadeIn(2000, function() {

    jQuery(window).trigger('resize');

    $('#hero-slider').slick({
      arrows: false,
    });
    
  });
});

function resizeToCover() {

  // set the video viewport to the window size
  jQuery('.video-viewport').width(jQuery(window).width());
  jQuery('.video-viewport').height(jQuery(window).height());

  // use largest scale factor of horizontal/vertical
  var scale_h = jQuery(window).width() / vid_w_orig;
  var scale_v = jQuery(window).height() / vid_h_orig;
  var scale = scale_h > scale_v ? scale_h : scale_v;

  // don't allow scaled width < minimum video width
  if (scale * vid_w_orig < min_w) {scale = min_w / vid_w_orig;};

  // now scale the video
  jQuery('video').width(scale * vid_w_orig);
  jQuery('video').height(scale * vid_h_orig);

  // and center it by scrolling the video viewport
  jQuery('.video-viewport').scrollLeft((jQuery('video').width() - jQuery(window).width()) / 2);
  jQuery('.video-viewport').scrollTop((jQuery('video').height() - jQuery(window).height()) / 2);

};