JSFiddle - React, Tailwind, and code Playground

by Chintan Upadhayay

HTML

<div id="status">test</div>
        <iframe id="video1" src="https://player.vimeo.com/video/69817226?autoplay=1&background=1&loop=0&mute=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br /><br />
        <iframe id="video2" src="https://player.vimeo.com/video/95219657?autoplay=0&background=1&loop=0&mute=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
        <iframe id="video3" src="https://player.vimeo.com/video/21953913?autoplay=0&background=1&loop=0&mute=0" width="480" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

        <script src="https://player.vimeo.com/api/player.js"></script>
        <script>
            //source= https://github.com/vimeo/player.js
            var vid1 = document.querySelector('#video1');
            var vid2 = document.querySelector('#video2');
            var vid3 = document.querySelector('#video3');
            var player1 = new Vimeo.Player(vid1);
            var player2 = new Vimeo.Player(vid2);
            var player3 = new Vimeo.Player(vid3);

            player1.play();

            player1.on('ended', function () {
                player2.play();
            });
            player2.on('ended', function () {
                player3.play();
            });
            player3.on('ended', function () {
                player1.play();
            });
        </script>