title: Play Html5 video on scroll
body: <p>I am working on a Wordpress site and I have the code below which is working how I want it (only playing once, with the "replay" button appearing at the end) </p>
  
  <p>I would like it to start playing when it is scrolled to ie. in the viewport.</p>
  
  <p>I have seen a few different ways of making this happen on here, but I can't get them to play nice with my current code.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="spacer"&gt;
  
    &lt;/div&gt;
    &lt;div class="video-wrapper"&gt;
      &lt;video id="bVideo" muted autoplay&gt;
        &lt;source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /&gt;
      &lt;/video&gt;
      &lt;div id="playButton" class="playButton" onclick="playPause()"&gt;&lt;/div&gt;
      &lt;div class="replayButton" id="replayButton" onclick="playPause()"&gt;REPLAY ↻&lt;/div&gt;
    &lt;/div&gt;
  &lt;script&gt;
  
  
  var bunnyVideo = document.getElementById("bVideo");
  var el = document.getElementById("playButton");
  var replay = document.getElementById("replayButton");
  replay.style.visibility = "hidden";
  
  function playPause() {
    if (bunnyVideo.paused) 
    {
      bunnyVideo.play();
        replay.className = "replayButton";
    replay.style.visibility = "hidden";
    } 
    else 
    {
      bunnyVideo.pause();
      el.className = "playButton";
      replay.className = "";
    }
  }
  
  function playPauseControls() {
    if (!bunnyVideo.paused) {
      el.className ="";
      replay.className = "";
    } else {
       el.className = "playButton";
       replay.className = "";
    }
  }
  
  function videoEnd() {
    replay.className = "replayButton";
    replay.style.visibility = "visible";
    el.className = "";
    }
  
  
  
  
  function showControls(){
    bunnyVideo.setAttribute("controls","controls");
  }
  function hideControls(){
    bunnyVideo.removeAttribute("controls","controls");
  }
  
  /*Google Analytics Tracker Function*/
  /*Assuming you've already set up the Google Analytics script function on your webpage. This just activates a trigger event when the video plays.*/
  /*function bunnyVideoView() {
       ga('send', 'event', { 
            'eventCategory': 'Bunny Video',
            'eventAction': 'play',
            'eventLabel': 'Bunny Video View'
       });
  }*/
  
  
  bunnyVideo.addEventListener("play", playPauseControls, false);
  bunnyVideo.addEventListener("pause", playPauseControls, false);
  bunnyVideo.addEventListener("mouseout", hideControls, false);
  bunnyVideo.addEventListener("ended", videoEnd, false);
  /*Google Analytics Tracker*/
  /*bunnyVideo.addEventListener("play", bunnyVideoView, false);*/
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.spacer {
    height: 400px;
  }
  
  .video-wrapper {
    position: relative;
    max-width: 680px;
  }
  
  .video-wrapper &gt; video {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      vertical-align: middle;
      cursor: pointer;
  }
  
  /* Hide iOS Play Button */
  video::-webkit-media-controls-start-playback-button {
      display: none!important;
      -webkit-appearance: none;
  }
  
  
  .playButton {
    border-radius: 100px;
    border: 8px solid #fff !important;
    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 400ms;
  }
  
  .playButton:before {
    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;
  }
  
  .replayButton {
      color: black;
    position: relative;
      text-align: center;
    margin: auto;
      margin-top: 0px;
    cursor: pointer;
    display: block;
    opacity: 0.95;
    transition: opacity 150ms;
  }
  
  .replayButton:hover, .replayButton:focus {
    color: #ea7200;
  }
  
  .replayButton:before {
    height: 45px;
    width: 45px;
    position: absolute;
    top: 18px;
    left: 18px;
    content: '';
    display: block;
    border-color: transparent white white white;
    border-radius: 50%;
    border-style: solid;
    border-width: 8px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  .replayButton:after {
    border-color: transparent transparent transparent white;
    border-style: solid;
    border-width: 0 45px 22px 22px;
    height: 0;
    position: absolute;
    top: 40px;
    left: 15px;
    bottom: 0;
    right: 0;
    width: 0;
    content: "";
    display: block;
    margin: auto;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/ag3sowbg/" rel="nofollow noreferrer">https://jsfiddle.net/ag3sowbg/</a></p>