Simple Video From VFE

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

    <!-- "Video For Everybody" v0.4.2 by Kroc Camen of Camen Design -->
  <div class="htmlvideoholder">
    <video  width="640" height="360">
        <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    </video>
    <div class="v-control play">
      <i class="fas fa-play"></i>
    </div>
    <div class="v-control volume">
      <i class="fas fa-volume-up"></i>
    </div>    
  </div>

SCSS

.htmlvideoholder {
  position: relative;
  display: inline-block;
  cursor: pointer;
  
  video {
    display: block;
  }
  
  .v-control {
    position: absolute;
    opacity: 0;
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
    color: white;
    transition: opacity ease 0.4s, color ease 0.4s;
  }
  
  .play {
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    font-size: 4rem;
    
  }
  
  .volume {
    top: 5%;
    right: 5%;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem;
    border-radius: 25%;
    color: rgba(255, 255, 255, 0.5);
    &:hover {
      color: rgba(255, 255, 255, 1);
    }
  }
  
  &:hover {
    .play {
      opacity: 1;
    }
    .volume {
      opacity: 1;
    }
  }
}