Video Player

by Thomas Orthbandt

HTML

<center>
  <div class="video-wrapper">
    <video class="video" id="bVideo" loop controls>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
    </video>
    <div class="playButton" onclick="playPause()"></div>
  </div>
</center>

CSS

.video-wrapper {
  position: relative;
}

.video {
  width: 680px;
}

.playButton {
  border-radius: 100px;
  border: 8px solid #fff;
  height: 100px;
  position: absolute;
  width: 100px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  cursor: pointer;
  display: block;
  opacity: 0.95;
  transition: opacity 150ms;
}

.playButton::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 50px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: -10px;
  bottom: 0;
  margin: auto;
}

JavaScript

var bunnyVideo = $("#bVideo");

function playPause() {
  if (bunnyVideo.paused) {
    bunnyVideo.play();
    $(".playButton").show();
  } else {
    bunnyVideo.pause();
    $(".playButton").hide();
  }
}

bunnyVideo.addEventListener("click", playPause, false);