HTML5 Video | How to create custom controls

custom_video_controls.html

<style media="screen">
.video-wrapper{
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 1;
  transition: all 0.5s ease 0s;}
.btn-wrapper {
  background: rgba(255, 255, 255, 0.62);
  position: absolute;
  width: 100%;
  padding: 10px;
  bottom: -20px;
  left: 0;
  box-sizing: border-box;
  opacity: 0;
  transition: all 1s ease 0s;
  /*z-index must be this number or greater thanks to the geniuses that develop web browsers.*/
  z-index: 2147483648;}
#video {
    width: 100%;
    height: auto;}
#video:-webkit-full-screen {
  width: 100%;
  height: 100%;}
  
/*hide full screen controls*/
video::-webkit-media-controls {
  display:none !important;}
video::-webkit-media-controls-enclosure {
  display:none !important;}
</style>


<div class="video-wrapper">
  <video  id="video"> <!--excluded controls attribute to hide default controls-->
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
      <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML5 video.
  </video>
  <div class="btn-wrapper">
    <!--Custom Controls go here.-->
    <button class="btn play">Play</button>
    <button class="btn fullscreen">Fullscreen</button>
  </div>
</div>

<!--Jquery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
  
  //Css objects optional. -- use .show() .hide() instead of .css()
  var fadein = {opacity: "1",bottom: "0px"};
  var fadeout = {opacity: "0", bottom: "-20px"};
  
  //get the id of the video
  var video = document.getElementById('video');
  function toggleFullScreen() {
    //to be cross browser you will need to do this for every browser. It's a pain in the ass!!
      if (!document.webkitFullscreenElement) {
          video.webkitRequestFullscreen();
      } else {
        if (document.webkitExitFullscreen) {
          video.webkitExitFullscreen();
        }
      }
    //reference this page for browser fullscreen functions... https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
    //end of pain in the ass.
  }
  
  //custom animations. shows controls on the mouse is over the video.
  $('#video')
      .mouseover(function(){
        $('.btn-wrapper').css(fadein);
      }).mouseout(function(){
        $('.btn-wrapper').css(fadeout);
      });
  $('.btn-wrapper')
      .mouseover(function(){
        $('.btn-wrapper').css(fadein);
      }).mouseout(function(){
        $('.btn-wrapper').css(fadeout);
      });

  $('.play').click(function(){
    //short hand for... if paused then play, if playing then pause.
    video.paused ? video.play() : video.pause();
  })
  $('.fullscreen').click(function(){
    toggleFullScreen();
  })
</script>