This is where all failed attempts were archived

Inspect this page for full code

Js, css, ...etc... are all on the same page so they won't be blocked by web browsers

12/12/2022:

Failed making custom controls for youtube embed.

Script 1:

$('a.play-video').click(function(){ $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'playVideo' + '","args":""}', '*'); }); $('a.stop-video').click(function(){ $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*'); }); $('a.pause-video').click(function(){ $('.youtube-video')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*'); });

Script 2:

/ global variable for the player var player; // this function gets called when API is ready to use function onYouTubePlayerAPIReady() { // create the global player from the specific iframe (#video) player = new YT.Player('video', { events: { // call this function when player is ready to use 'onReady': onPlayerReady } }); } function onPlayerReady(event) { // bind events var playButton = document.getElementById("play-button"); playButton.addEventListener("click", function() { player.playVideo(); }); var pauseButton = document.getElementById("pause-button"); pauseButton.addEventListener("click", function() { player.pauseVideo(); }); var stopButton = document.getElementById("stop-button"); stopButton.addEventListener("click", function() { player.stopVideo(); }); } // Inject YouTube API script var tag = document.createElement('script'); tag.src = "https://www.youtube.com/player_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Again 12/12/2022

Failed to kill related videos off youtube embed

The whole script:

" use strict"; document.addEventListener('DOMContentLoaded', function() { // Activate only if not already activated if (window.hideYTActivated) return; // Activate on all players let onYouTubeIframeAPIReadyCallbacks = []; for (let playerWrap of document.querySelectorAll(".hytPlayerWrap")) { let playerFrame = playerWrap.querySelector("iframe"); let tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; let firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); let onPlayerStateChange = function(event) { if (event.data == YT.PlayerState.ENDED) { playerWrap.classList.add("ended"); } else if (event.data == YT.PlayerState.PAUSED) { playerWrap.classList.add("paused"); } else if (event.data == YT.PlayerState.PLAYING) { playerWrap.classList.remove("ended"); playerWrap.classList.remove("paused"); } }; let player; onYouTubeIframeAPIReadyCallbacks.push(function() { player = new YT.Player(playerFrame, { events: { 'onStateChange': onPlayerStateChange } }); }); playerWrap.addEventListener("click", function() { let playerState = player.getPlayerState(); if (playerState == YT.PlayerState.ENDED) { player.seekTo(0); } else if (playerState == YT.PlayerState.PAUSED) { player.playVideo(); } }); } window.onYouTubeIframeAPIReady = function() { for (let callback of onYouTubeIframeAPIReadyCallbacks) { callback(); } }; window.hideYTActivated = true; });