<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YouTube Single Play</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<iframe src="https://www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video1" width="400" height="225"></iframe>
<iframe src="https://www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video2" width="400" height="225"></iframe>
<iframe src="https://www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video3" width="400" height="225"></iframe>
<script>
var players = {};
var currentlyPlaying = null;
function onYouTubeIframeAPIReady() {
$('#video1, #video2, #video3').each(function() {
var id = $(this).attr('id');
players[id] = new YT.Player(id, {
events: {
'onStateChange': function(event) {
if(event.data == YT.PlayerState.PLAYING){
// Pause other videos
$.each(players, function(key, player){
if(key !== id && player.getPlayerState() == YT.PlayerState.PLAYING){
player.pauseVideo();
}
});
}
}
}
});
});
}
</script>
</body>
</html>