<!-- Replace the YouTube video IDs with your actual video IDs -->

<div class="video-container">

    <div id="player1"></div>

</div>

<div class="video-container">

    <div id="player2"></div>

</div>

<div class="video-container">

    <div id="player3"></div>

</div>

<!-- YouTube IFrame API -->

<script src="https://www.youtube.com/iframe_api"></script>

<script>

    var player1, player2, player3;

    // Replace ONLY the video IDs below, not the div IDs above!

    var videoId1 = 'Dy_18LkVzHE';

    var videoId2 = 'Dy_18LkVzHE';

    var videoId3 = 'Dy_18LkVzHE';

    // This function creates the players after the API code downloads

    function onYouTubeIframeAPIReady() {

        player1 = new YT.Player('player1', {

            height: '360',

            width: '640',

            videoId: videoId1,

            events: {

                'onStateChange': onPlayer1StateChange

            }

        });

        player2 = new YT.Player('player2', {

            height: '360',

            width: '640',

            videoId: videoId2,

            events: {

                'onStateChange': onPlayer2StateChange

            }

        });

        player3 = new YT.Player('player3', {

            height: '360',

            width: '640',

            videoId: videoId3,

            events: {

                'onStateChange': onPlayer3StateChange

            }

        });

    }

    // Event handlers for each player

    function onPlayer1StateChange(event) {

        if (event.data == YT.PlayerState.ENDED) {

            player1.seekTo(0);

            player1.pauseVideo();

        }

    }

    function onPlayer2StateChange(event) {

        if (event.data == YT.PlayerState.ENDED) {

            player2.seekTo(0);

            player2.pauseVideo();

        }

    }

    function onPlayer3StateChange(event) {

        if (event.data == YT.PlayerState.ENDED) {

            player3.seekTo(0);

            player3.pauseVideo();

        }

    }

</script>