Responsive header video demo

index.html

<div class="header-video" style="width: 1349px; height: 318px;">
    <img src="http://zerosixthree.se/labs/video-header/img/masthead.jpg" class="header-video__media" data-video-url="https://www.youtube.com/embed/Scxs7L0vhZ4" data-teaser="video/teaser-video" data-video-width="560" data-video-height="315">
  <!--  <a href="https://www.youtube.com/embed/Scxs7L0vhZ4" class="header-video__play-trigger" id="header-video__play-trigger" style="display: block;">Play video__</a> --->
    <button type="button" class="header-video__close-trigger" id="header-video__close-trigger" style="display: none;">Close video</button>
  <video autoplay="true" loop="true" muted="" id="header-video__teaser-video" class="header-video__teaser-video"><source src="video/teaser-video.webm" type="video/mp4"><source src="http://zerosixthree.se/labs/video-header/video/teaser-video.mp4" type="video/mp4"></video></div>

  <div class="container">
    <h1>Responsive header video demo.</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, accusamus, eius aperiam velit modi obcaecati aliquid fugiat quisquam corporis consequatur neque nemo magnam quas molestias nostrum ex a voluptatibus consectetur praesentium pariatur nobis tempore hic ea mollitia in illum deserunt accusantium natus distinctio quae magni reprehenderit alias ipsa rerum quos.
    </p>
    <p>
      Ipsum dolor sit amet, consectetur adipisicing elit. Culpa, voluptatum, veritatis, laudantium officia maxime tempora molestias est sunt iure vel blanditiis reprehenderit repellat amet dolorem eaque alias beatae nihil aliquid officiis possimus labore consectetur neque dolorum itaque libero accusantium odio.
    </p>
    <h2>Lorem ipsum</h2>
    <p>
      Consectetur adipisicing elit. Molestias, molestiae, asperiores iure ducimus itaque delectus quasi! Qui, deleniti, harum, magni blanditiis quasi reprehenderit earum quam tempore asperiores exercitationem dignissimos accusantium ipsam laudantium animi possimus ducimus pariatur provident numquam eveniet reiciendis. Libero, rem pariatur quos nobis cupiditate mollitia hic sunt totam.
    </p>
    <p>
      Dolor sit amet, consectetur adipisicing elit. Voluptas accusamus delectus explicabo officia laboriosam. Distinctio, laudantium minima hic corrupti libero!
    </p>
    <h2>Dolor sit amet</h2>
    <p>
      Ipsum, tempore, itaque dolorum sint reiciendis mollitia sed aperiam fugit est dolorem quos asperiores laborum veniam. In earum ut porro omnis veniam pariatur quaerat architecto atque itaque?
    </p>
  </div>

responsive-header-video-demo.markdown

Responsive header video demo

A Pen by Stan Williams on CodePen.

License.

script.js

$(document).ready(function() {
    $('.header-video').each(function(i, elem) {
        headerVideo = new HeaderVideo({
          element: elem,
          media: '.header-video__media',
          playTrigger: '.header-video__play-trigger',
          closeTrigger: '.header-video__close-trigger'
        });
    });
  });

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="http://zerosixthree.se/labs/video-header/js/script.js?v1.2"></script>

style.css

.header-video {
  position: relative;
  overflow: hidden;
}

.header-video iframe,
.header-video video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.header-video iframe {
  height: 100%;
  width: 100%;
}

.header-video video {
  width: 100%;
}

.header-video__teaser-video {
  width: 100%;
  height: auto; 
}

.header-video__media {
  width: 100%;
  height: auto;
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 400;
  font-size: 100%;
}

p {
  font-size: 1.2em;
  margin-bottom: 1em;
}

h1, h2, h3 {
  font-weight: 700;
  margin-bottom: .35em;
}

h1 {
  font-size: 3em;
  line-height: 1;
}

h2 {
  font-size: 2em;
  margin-top: 1em;
}

.header-video__play-trigger {
  z-index: 5;
  position: absolute;
  background: rgba(0,0,0,.3);
  text-align: center;
  color: white;
  text-decoration: none;
  padding: 1.5em 3em;
  z-index: 5;
  left: 50%;
  top: 50%;
  border-radius: 10px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: background .5s;
  -moz-transition: background .5s;
  transition: background .5s;
}

.header-video__play-trigger:hover {
  background: rgba(0,0,0,.5);
}
.header-video__close-trigger {
  z-index: 99;
  position: absolute;
  background: #A61212;
  text-align: center;
  color: white;
  text-decoration: none;
  padding: 2em 3em;
  border-radius: 10px;
  right: 30px;
  top: 30px;
  -webkit-transition: background .3s;
  -moz-transition: background .3s;
  transition: background .3s;  
  border: none;
}
.header-video__close-trigger:hover {
  background: #363636;
  cursor: pointer;
}

.container {
  margin: 0 auto;
  max-width: 1200px;
  padding: 10em 2em 10em 2em;
}

Preview here: https://codepen.io/Stanssongs/full/KqgEWz/