<div class="header-container">
    <div class="video-container">
      <video preload="true" autoplay="" volume="0" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/349756/tasklyhomepage.jpg">
        <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/349756/tasklyvidfinal.mp4" type="video/mp4">
          <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/349756/tasklyvid.webm">
            <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/349756/tasklyvid.ogv" type="video/ogg">
      </video> <!-- end of video -->
    </div> <!-- end of video container -->
  </div> <!--- end of header container --> 
/* Video header */
.header-container {
 height: 0;
 position: relative;
 padding-bottom: 56.25%;
 overflow: hidden;
}

.video-container {
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
}

video {
 position: absolute;
 width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.