ilopez · October 15, 2024 22:27
diff --git a/vt_double.html b/vt_double.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom YouTube Video Sync with Pause/Resume</title>
    <script src="https://www.youtube.com/iframe_api"></script>
 </head>
 <body>
    <h2>Custom YouTube Video Sync with Pause/Resume</h2>

    <!-- Input form for the video IDs and start times -->
    <div>
        <h3>Video 1</h3>
        <label for="video1-id">YouTube Video ID:</label>
        <input type="text" id="video1-id" value="719kDFBQtY4"> <!-- Default Video 1 ID -->
        <label for="video1-start">Start Time (in seconds):</label>
        <input type="number" id="video1-start" value="22"> <!-- Default Start Time for Video 1 -->

        <h3>Video 2</h3>
        <label for="video2-id">YouTube Video ID:</label>
        <input type="text" id="video2-id" value="kuvocyMCs-I"> <!-- Default Video 2 ID -->
        <label for="video2-start">Start Time (in seconds):</label>
        <input type="number" id="video2-start" value="34"> <!-- Default Start Time for Video 2 -->
    </div>

    <br>

    <!-- Buttons to load, play, pause/resume, and reset the videos -->
    <button id="loadButton">Load Videos</button>
    <button id="playButton" disabled>Play Both Videos</button>
    <button id="pauseResumeButton" disabled>Pause/Resume Both Videos</button>
    <button id="resetButton">Reset</button>

    <!-- Containers for the YouTube videos -->
    <div>
        <div id="player1"></div>
        <div id="player2"></div>
    </div>

    <script>
        var player1, player2;
        var startTime1, startTime2;
        var videosPlaying = true; // Track whether videos are playing or paused

        // Load YouTube IFrame Player API
        function onYouTubeIframeAPIReady() {
            document.getElementById('loadButton').addEventListener('click', loadVideos);
            document.getElementById('playButton').addEventListener('click', playVideos);
            document.getElementById('pauseResumeButton').addEventListener('click', togglePauseResume);
            document.getElementById('resetButton').addEventListener('click', resetPlayers);
        }

        // Function to load the videos based on user input
        function loadVideos() {
            // Get the video IDs and start times from the input fields
            var video1Id = document.getElementById('video1-id').value;
            startTime1 = parseInt(document.getElementById('video1-start').value);
            var video2Id = document.getElementById('video2-id').value;
            startTime2 = parseInt(document.getElementById('video2-start').value);

            // Check if the inputs are valid
            if (!video1Id || isNaN(startTime1) || !video2Id || isNaN(startTime2)) {
                alert("Please enter valid video IDs and start times.");
                return;
            }

            // Load Video 1
            player1 = new YT.Player('player1', {
                height: '360',
                width: '640',
                videoId: video1Id,
                events: {
                    'onReady': onPlayerReady
                }
            });

            // Load Video 2
            player2 = new YT.Player('player2', {
                height: '360',
                width: '640',
                videoId: video2Id,
                events: {
                    'onReady': onPlayerReady
                }
            });

            // Enable the play and pause/resume buttons once videos are loaded
            document.getElementById('playButton').disabled = false;
            document.getElementById('pauseResumeButton').disabled = false;
        }

        // When players are ready (optional if you need to do any setup)
        function onPlayerReady(event) {
            // The videos are ready, but we wait until the user clicks "Play Both Videos"
        }

        // Function to play both videos at the specified start times
        function playVideos() {
            if (player1 && player2) {
                // Seek both videos to their respective start times
                player1.seekTo(startTime1, true);
                player2.seekTo(startTime2, true);

                // Play both videos
                player1.playVideo();
                player2.playVideo();

                // Update the state to playing
                videosPlaying = true;
            }
        }

        // Function to toggle between pausing and resuming both videos
        function togglePauseResume() {
            if (player1 && player2) {
                if (videosPlaying) {
                    // Pause both videos
                    player1.pauseVideo();
                    player2.pauseVideo();
                    videosPlaying = false; // Update state to paused
                } else {
                    // Resume both videos
                    player1.playVideo();
                    player2.playVideo();
                    videosPlaying = true; // Update state to playing
                }
            }
        }

        // Function to reset the players (clear iframes)
        function resetPlayers() {
            // Clear the YouTube players by destroying the iframe content
            if (player1) {
                player1.destroy();
                player1 = null;
            }
            if (player2) {
                player2.destroy();
                player2 = null;
            }

            // Disable the play and pause/resume buttons until videos are loaded again
            document.getElementById('playButton').disabled = true;
            document.getElementById('pauseResumeButton').disabled = true;

            // Clear the video containers
            document.getElementById('player1').innerHTML = '';
            document.getElementById('player2').innerHTML = '';

            // Reset the state of videosPlaying to true for the next load
            videosPlaying = true;
        }
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Custom YouTube Video Sync with Pause/Resume</title>
	<script src="https://www.youtube.com/iframe_api"></script>
	</head>
	<body>
	<h2>Custom YouTube Video Sync with Pause/Resume</h2>

	<!-- Input form for the video IDs and start times -->
	<div>
	<h3>Video 1</h3>
	<label for="video1-id">YouTube Video ID:</label>
	<input type="text" id="video1-id" value="719kDFBQtY4"> <!-- Default Video 1 ID -->
	<label for="video1-start">Start Time (in seconds):</label>
	<input type="number" id="video1-start" value="22"> <!-- Default Start Time for Video 1 -->

	<h3>Video 2</h3>
	<label for="video2-id">YouTube Video ID:</label>
	<input type="text" id="video2-id" value="kuvocyMCs-I"> <!-- Default Video 2 ID -->
	<label for="video2-start">Start Time (in seconds):</label>
	<input type="number" id="video2-start" value="34"> <!-- Default Start Time for Video 2 -->
	</div>

	<br>

	<!-- Buttons to load, play, pause/resume, and reset the videos -->
	<button id="loadButton">Load Videos</button>
	<button id="playButton" disabled>Play Both Videos</button>
	<button id="pauseResumeButton" disabled>Pause/Resume Both Videos</button>
	<button id="resetButton">Reset</button>

	<!-- Containers for the YouTube videos -->
	<div>
	<div id="player1"></div>
	<div id="player2"></div>
	</div>

	<script>
	var player1, player2;
	var startTime1, startTime2;
	var videosPlaying = true; // Track whether videos are playing or paused

	// Load YouTube IFrame Player API
	function onYouTubeIframeAPIReady() {
	document.getElementById('loadButton').addEventListener('click', loadVideos);
	document.getElementById('playButton').addEventListener('click', playVideos);
	document.getElementById('pauseResumeButton').addEventListener('click', togglePauseResume);
	document.getElementById('resetButton').addEventListener('click', resetPlayers);
	}

	// Function to load the videos based on user input
	function loadVideos() {
	// Get the video IDs and start times from the input fields
	var video1Id = document.getElementById('video1-id').value;
	startTime1 = parseInt(document.getElementById('video1-start').value);
	var video2Id = document.getElementById('video2-id').value;
	startTime2 = parseInt(document.getElementById('video2-start').value);

	// Check if the inputs are valid
	if (!video1Id \|\| isNaN(startTime1) \|\| !video2Id \|\| isNaN(startTime2)) {
	alert("Please enter valid video IDs and start times.");
	return;
	}

	// Load Video 1
	player1 = new YT.Player('player1', {
	height: '360',
	width: '640',
	videoId: video1Id,
	events: {
	'onReady': onPlayerReady
	}
	});

	// Load Video 2
	player2 = new YT.Player('player2', {
	height: '360',
	width: '640',
	videoId: video2Id,
	events: {
	'onReady': onPlayerReady
	}
	});

	// Enable the play and pause/resume buttons once videos are loaded
	document.getElementById('playButton').disabled = false;
	document.getElementById('pauseResumeButton').disabled = false;
	}

	// When players are ready (optional if you need to do any setup)
	function onPlayerReady(event) {
	// The videos are ready, but we wait until the user clicks "Play Both Videos"
	}

	// Function to play both videos at the specified start times
	function playVideos() {
	if (player1 && player2) {
	// Seek both videos to their respective start times
	player1.seekTo(startTime1, true);
	player2.seekTo(startTime2, true);

	// Play both videos
	player1.playVideo();
	player2.playVideo();

	// Update the state to playing
	videosPlaying = true;
	}
	}

	// Function to toggle between pausing and resuming both videos
	function togglePauseResume() {
	if (player1 && player2) {
	if (videosPlaying) {
	// Pause both videos
	player1.pauseVideo();
	player2.pauseVideo();
	videosPlaying = false; // Update state to paused
	} else {
	// Resume both videos
	player1.playVideo();
	player2.playVideo();
	videosPlaying = true; // Update state to playing
	}
	}
	}

	// Function to reset the players (clear iframes)
	function resetPlayers() {
	// Clear the YouTube players by destroying the iframe content
	if (player1) {
	player1.destroy();
	player1 = null;
	}
	if (player2) {
	player2.destroy();
	player2 = null;
	}

	// Disable the play and pause/resume buttons until videos are loaded again
	document.getElementById('playButton').disabled = true;
	document.getElementById('pauseResumeButton').disabled = true;

	// Clear the video containers
	document.getElementById('player1').innerHTML = '';
	document.getElementById('player2').innerHTML = '';

	// Reset the state of videosPlaying to true for the next load
	videosPlaying = true;
	}
	</script>
	</body>
	</html>