Clicking on the button itself doesn't play the video

Question

I'm looking for a pure CSS solution for this issue, as I remember I did it in the past but I can't remember what I exactly did.

The problem is very clear, if you click on the button itself it won't fire the script (video won't play). but if you click anywhere else around it, that will work and video will play. any ideas?

Code:

var videoWrappers = document.getElementsByClassName('video-wrapper'),
  i,
  ln = videoWrappers ? videoWrappers.length : 0,
  video,
  videoPlayButton,
  videoMethods = {
    renderVideoPlayButton: function() {
      for (i = 0; i < ln; i++) {
        this.formatVideoPlayButton(videoWrappers[i]);
        video = videoWrappers[i].querySelector('video');
        if (video && videoWrappers[i]) {
          video.classList.add('has-media-controls-hidden');
          videoPlayButton = videoWrappers[i].getElementsByClassName('video-overlay-play-button')[0];
          videoPlayButton.addEventListener('click', this.hideVideoPlayButton);
        }
      }
    },

    formatVideoPlayButton: function(videoWrapper) {
      videoWrapper.insertAdjacentHTML('beforeend', '\
                  <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
                  <polygon points="70, 55 70, 145 145, 100" fill="#f00f00"/>\
                  </svg>\
                ');
    },

    hideVideoPlayButton: function(e) {
      console.log(e.target);
      video = e.target.parentNode.querySelector('video');
      video.play();
      e.target.style.display = 'none';
      video.classList.remove('has-media-controls-hidden');
      video.setAttribute('controls', 'controls');
    }
  }

videoMethods.renderVideoPlayButton();

.video-wrapper {
  position: relative;
  max-width: 500px;
  margin-bottom: 10px;
}

.video-wrapper>video {
  width: 100%;
  vertical-align: middle;
}

.video-wrapper>video.has-media-controls-hidden::-webkit-media-controls {
  display: none;
}

.video-overlay-play-button {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px calc(50% - 50px);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: 0.95;
  cursor: pointer;
  background-image: linear-gradient(transparent, #000);
  transition: opacity 150ms;
}

.video-overlay-play-button:first-child {
  pointer-events: none;
}

.video-overlay-play-button:hover {
  opacity: 1;
}

.video-overlay-play-button.is-hidden {
  display: none;
}

<div class="main">
  <div class="video-wrapper">
    <video src="//clips.vorwaerts-gmbh.de/VfE_html5.mp4" poster="//s3-us-west-2.amazonaws.com/s.cdpn.io/3174/poster.png"></video>
  </div>
</div>

Answer 1

You can use

.video-overlay-play-button > polygon {
  pointer-events: none;
}

Example