☰

YouTube Link-Player

Open YouTube hyperlinks as embedded videos.

  1. // ==UserScript==
  2. // @name         YouTube Link-Player
  3. // @namespace    https://github.com/adeoladev/youtube-linkplayer
  4. // @version      1.2.7
  5. // @description  Open YouTube hyperlinks as embedded videos.
  6. // @author       Adeola Boye
  7. // @match        *://*/*
  8. // @icon         https://addons.mozilla.org/user-media/addon_icons/2877/2877505-64.png
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     document.addEventListener('contextmenu', function(e) {
  17.         var link = e.originalTarget.href;
  18.         if(link.includes("youtube.com/watch")) {
  19.         if(link.includes('&t=')) {
  20.             var time = "?s=linkplayer&start="+link.substring(link.indexOf("t=") + 2);
  21.             var seconds = time.slice(0, -1);
  22.         } else {
  23.             var seconds = '';
  24.         }
  25.         var id = link.substring(link.indexOf("=") + 1, link.indexOf("=") + 12);
  26.         var randomNum = Math.random();
  27.         e.originalTarget.insertAdjacentHTML('afterend', "<div id='button"+randomNum+"' style='display:inline;background-color:red;border-radius:4px;color:white;font-size:8px;text-align:center;padding-top: 1px;padding-left: 5px;padding-right: 5px;padding-bottom:2px;margin-left: 4px;height: fit-content;width: 10px;font-weight:bold;'>&#9658;</div>");
  28.         var toggle = document.getElementById('button'+randomNum);
  29.         toggle.addEventListener("click", function() {
  30.             if(document.getElementById('frame'+id)){
  31.             document.getElementById('frame'+id).remove();
  32.             } else {
  33.             toggle.insertAdjacentHTML('afterend','<iframe style="display: block;border-radius: 10px;margin-top: 5px;margin-bottom: 5px;" id="frame'+id+'" width="560" height="315" src="https://www.youtube.com/embed/'+id+seconds+'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>');
  34.             }
  35.         });
  36.     }
  37.     });
  38.  
  39.         setTimeout(function () {
  40.         if (!window.location.hostname.includes("youtube.com")) {
  41.     var youtubeLinks = document.querySelectorAll('a[href*="youtube.com/watch"]');
  42.     var miniYoutubeLinks = document.querySelectorAll('a[href*="https://youtu.be/"]');
  43.     var youtubeShorts = document.querySelectorAll('a[href*="youtube.com/shorts"]');
  44.  
  45.     youtubeLinks.forEach(function(element){
  46.         var children = Array.from(element.childNodes);
  47.         let nodeTypes = children.map(el=>el.tagName);
  48.         if(element.innerText || nodeTypes.includes(':header')) {
  49.         var id = element.href.substring(element.href.indexOf("=") + 1, element.href.indexOf("=") + 12);
  50.         var randomNum = Math.random();
  51.         var button = "<div id='button"+randomNum+"' style='display:inline;background-color:red;border-radius:4px;color:white;font-size:8px;text-align:center;padding-top: 1px;padding-left: 5px;padding-right: 5px;padding-bottom:2px;margin-left: 4px;height: fit-content;width: 10px;font-weight:bold;'>&#9658;</div>";
  52.         element.insertAdjacentHTML('afterend', button);
  53.         var toggle = document.getElementById('button'+randomNum);
  54.         toggle.addEventListener("click", function() {
  55.             if(document.getElementById('frame'+id)){
  56.             document.getElementById('frame'+id).remove();
  57.             } else {
  58.             toggle.insertAdjacentHTML('afterend','<iframe style="display: block;border-radius: 10px;margin-top: 5px;margin-bottom: 5px;" id="frame'+id+'" width="560" height="315" src="https://www.youtube.com/embed/'+id+'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>');
  59.             }
  60.         });
  61.         }
  62.     });
  63.  
  64.     miniYoutubeLinks.forEach(function(element){
  65.         var children = Array.from(element.childNodes);
  66.         let nodeTypes = children.map(el=>el.tagName);
  67.         if(element.innerText || nodeTypes.includes(':header')) {
  68.         var id = element.href.substring(element.href.indexOf("e/") +2, 28);
  69.         var randomNum = Math.random();
  70.         var button = "<div id='button"+randomNum+"' style='display:inline;background-color:red;border-radius:4px;color:white;font-size:8px;text-align:center;padding-top: 1px;padding-left: 5px;padding-right: 5px;padding-bottom:2px;margin-left: 4px;height: fit-content;width: 10px;font-weight:bold;'>&#9658;</div>";
  71.         element.insertAdjacentHTML('afterend', button);
  72.         var toggle = document.getElementById('button'+randomNum);
  73.         toggle.addEventListener("click", function() {
  74.             if(document.getElementById('frame'+id)){
  75.             document.getElementById('frame'+id).remove();
  76.             } else {
  77.             toggle.insertAdjacentHTML('afterend','<iframe style="display: block;border-radius: 10px;margin-top: 5px;margin-bottom: 5px;" id="frame'+id+'" width="560" height="315" src="https://www.youtube.com/embed/'+id+'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>');
  78.             }
  79.         });
  80.         }
  81.     });
  82.  
  83.     youtubeShorts.forEach(function(element){
  84.         var children = Array.from(element.childNodes);
  85.         let nodeTypes = children.map(el=>el.tagName);
  86.         if(element.innerText || nodeTypes.includes(':header')) {
  87.         var id = element.href.substring(element.href.indexOf("s/") +2, element.href.indexOf("s/") + 13);
  88.         var randomNum = Math.random();
  89.         var button = "<div id='button"+randomNum+"' style='display:inline;background-color:red;border-radius:4px;color:white;font-size:8px;text-align:center;padding-top: 1px;padding-left: 5px;padding-right: 5px;padding-bottom:2px;margin-left: 4px;height: fit-content;width: 10px;font-weight:bold;'>&#9658;</div>";
  90.         element.insertAdjacentHTML('afterend', button);
  91.         var toggle = document.getElementById('button'+randomNum);
  92.         toggle.addEventListener("click", function() {
  93.             if(document.getElementById('frame'+id)){
  94.             document.getElementById('frame'+id).remove();
  95.             } else {
  96.             toggle.insertAdjacentHTML('afterend','<iframe style="display: block;border-radius: 10px;margin-top: 5px;margin-bottom: 5px;" id="frame'+id+'" width="279" height="496" src="https://www.youtube.com/embed/'+id+'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>');
  97.             }
  98.         });
  99.         }
  100.     });
  101.         }
  102.     }, 1000);
  103. })();