I am trying to have users click a play button, watch a case study video, and have the video go back to its original state once done playing. The issue is that when adding multiple case studies on one page the getElementById(), not only is invalid HTML, but it also plays the wrong case study video or it won't play at all.
I read online that getElementsByName or getElementsByClassName could be an alternative, but I can't get them to work.
Case study HTML block (this gets repeated on the page)
<div class="caseStudy">
<button id="playButton"></button>
<div id="casestudyPoster" class="caseStudy_poster"></div>
<iframe class="caseStudy_video" src="<vimeo-url-here>" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
JavaScript:
var poster = document.getElementById("casestudyPoster");
var button = document.getElementById("playButton");
poster.onclick = function() { fadeImage() };
button.onclick = function() { fadeImage() };
function fadeImage() {
poster.style.visibility = "hidden";
button.style.visibility = "hidden";
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.play();
player.on('ended', function(data){
poster.style.visibility = "visible";
button.style.visibility = "visible";
});
}
How can I get this JavaScript to work with multiple caseStudys?
The issue is you are binding your JavaScript functionality to only one element, whereas you desire to bind your JavaScript functionality to multiple elements.
Here is an example of A) collecting several similar elements B) binding unique events to their unique properties.
// Gather all your similar elements
const videoElements = document.querySelectorAll( '.video-element' );
// For each element, let's do something with it.
videoElements.forEach( ( vidEl ) => {
// For this current element, lets create useful variables from elements found within it.
const playButton = vidEl.querySelector( '.play-button' );
const dynamicText = vidEl.querySelector( '.dynamic-text' );
// For this current element's play button, let's bind a unique event to it.
playButton.onclick = () => { dynamicText.innerHTML = `Video Playing!` };
} );.video-element {
border: 1px solid;
margin: 1rem;
}<div class="video-element">
<h2>Video 1</h2>
<button class="play-button">Play</button>
<span class="dynamic-text">I have my own functionality!</span>
</div>
<div class="video-element">
<h2>Video 2</h2>
<button class="play-button">Play</button>
<span class="dynamic-text">I have my own functionality!</span>
</div>
<div class="video-element">
<h2>Video 3</h2>
<button class="play-button">Play</button>
<span class="dynamic-text">I have my own functionality!</span>
</div>
<div class="video-element">
<h2>Video 4</h2>
<button class="play-button">Play</button>
<span class="dynamic-text">I have my own functionality!</span>
</div>