Video end control

by Ankit Patidar

HTML

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

<article>
  <a href="http://getthestandard.com">theStandard</a>
</article>

<video autoplay id="video-background" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148422/screencap-wheel.png" muted controls>
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/148422/Vienna-SD.mp4" type="video/mp4">
</video>

CSS

body {
  margin: 0;
  padding: 0;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/148422/screencap-wheel.png) #fff;
  background-attachment: fixed;
  background-size: cover;
}

#video-background {
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}

article {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

a {
  position: absolute;
  top: 40%;
  width: 100%;
  font-size: 3.6rem;
  letter-spacing: 3px;
  color: #fff;
  font-family: Oswald, sans-serif;
  text-shadow: 1px 1px 1px #16a085, 1px 1px 4px #2980b9;
  text-align: center;
  text-decoration:none;
  opacity:0;
}

JavaScript

$(function(){
  $('#video-background').on('ended', function(){
    $(this).fadeOut('2000', function(){
      $('a').css('opacity', 1);
   });
  });
});