<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%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.