JSFiddle - React, Tailwind, and code Playground

by tjnicolaides

HTML

<video width="100%" height="200px" poster="http://www.example.com/wp-content/uploads/2013/12/example1.png">
<source src="http://video.example.com/example1.mp4" type="video/mp4">
</video>
<button class="play_button">Play Video</button>
    
<video width="100%" height="200px" poster="http://www.example.com/wp-content/uploads/2013/12/example2.png">
<source src="http://video.example.com/example2.mp4" type="video/mp4">
</video>
<button class="play_button">Play Video</button>
    
<video width="100%" height="200px" poster="http://www.example.com/wp-content/uploads/2013/12/example3.png">
<source src="http://video.example.com/example3.mp4" type="video/mp4">
</video>
<button class="play_button">Play Video</button>

JavaScript

var videos = document.getElementsByTagName('video'),
    play_buttons = document.getElementsByClassName('play_button'),
    time;

for(var i=0; i< videos.length; i++) {
    console.log(videos[i]);
    // add event listeners and stuff here
}

for(var i=0; i < play_buttons.length; i++) {
    console.log(play_buttons[i]);
    // add event listeners and stuff here
}