Displaying A Play Button On Multiple Videos On The Same Page

I'm a complete novice when it comes to Javascript (& copy and paste kind of guy ;)... so I'm having a bit of a problem trying to figure out how to do the following: I've got a

Solution 1:

<div class="swiper-slide"> <div class="video-wrapper-two"> <video controls preload="metadata" class="pure-img video" poster="assets/posters/poster_adele-BBC.jpg"> <source src="http://d1wv6pnepp7p5s.cloudfront.net/AA_BBC_ALL_CUTDOWN_02.mp4" type="video/mp4"></source> </video> </div> </div>

So let's focus on these lines. Your first error in HTML is renaming the 'video-wrapper' class to 'video-wrapper-two' on the second element. It must be the same if you plan to reuse the elements in JavaScript.

Your second error is referencing only the first 'video-wrapper' from your array instead of getting them all videoWrapper = document.getElementsByClassName('video-wrapper')[0]

Instead you would need this

videoWrappers = document.getElementsByClassName('video-wrapper');videos = document.getElementsByTagName('video');

The third problem needs a bit more code, because at the moment you baked in the single videoElement item into your functions, so you can't call it on each. So instead of referencing the videos from the function, you have to pass it as a reference (as a function parameter) so you could do something like this when you call it

for(var i = 0; i < videWrappers.length; i++){
    // it will be called on each video element one by one
    videoMethods.renderVideoPlayButton(videoWrappers[i], video[i]); 
}

The key point is to never bake variables into your functions, instead always use function parameters so you can reuse those functions whenever you need it.

Solution 2:

The issue is

videoWrapper = document.getElementsByClassName('video-wrapper')[0],
video = document.getElementsByTagName('video')[0],

It specify first set only

You should make it as a function and invoke twice.

var videoPlayButton;
functionaddMethod(video,videoWrapper){
 return {
    renderVideoPlayButton: function() {
      if (videoWrapper.contains(video)) {
        this.formatVideoPlayButton()
        video.classList.add('has-media-controls-hidden')
        videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
        videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
      }
    },

    formatVideoPlayButton: function() {
      videoWrapper.insertAdjacentHTML('beforeend', '\
            <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
                <circle cx="100" cy="100" r="90" fill="#000" stroke-width="5" stroke="#fff"/>\
                <polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
            </svg>\
        ')
    },

    hideVideoPlayButton: function() {
      video.play()
      videoPlayButton.classList.add('is-hidden')
      video.classList.remove('has-media-controls-hidden')
      video.setAttribute('controls', 'controls')
    }
  }
}

addMethod(document.getElementsByTagName('video')[0],document.getElementsByClassName('video-wrapper')[0]).renderVideoPlayButton();
addMethod(document.getElementsByTagName('video')[1],document.getElementsByClassName('video-wrapper-two')[0]).renderVideoPlayButton();

<divclass="swiper-slide"><divclass="video-wrapper"><videocontrolspreload="metadata"class="pure-img video"poster="assets/posters/poster_adele-BBC.jpg"><sourcesrc="http://d1wv6pnepp7p5s.cloudfront.net/AA_BBC_ALL_CUTDOWN_02.mp4"type="video/mp4"></source></video></div></div><divclass="swiper-slide"><divclass="video-wrapper-two"><videocontrolspreload="metadata"class="pure-img video"poster="assets/posters/poster_adele-BBC.jpg"><sourcesrc="http://d1wv6pnepp7p5s.cloudfront.net/AA_BBC_ALL_CUTDOWN_02.mp4"type="video/mp4"></source></video></div></div>