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. })();