☰

YouTube Link to Embedded Video

Opens YouTube links in an iframe when the link is clicked

目前为 2024-05-17 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube Link to Embedded Video
  3. // @namespace    https://greasyfork.org/en/users/670188-hacker09?sort=daily_installs
  4. // @version      1
  5. // @description  Opens YouTube links in an iframe when the link is clicked
  6. // @author       hacker09
  7. // @match        *://*/*
  8. // @run-at       document-end
  9. // @icon         https://www.youtube.com/s/desktop/03f86491/img/favicon.ico
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. new MutationObserver(function() { //Starts a new MutationObserver function
  14.   'use strict';
  15.   document.querySelectorAll('[href*="youtube.com/watch?v="], [href*="youtu.be/watch?v="]').forEach(link => { //ForEach YT link
  16.     link.addEventListener('click', function(event) { //When the YT link is clicked
  17.       if (event.target.closest('a') && event.button !== 2 && !event.ctrlKey && !event.metaKey) { //If the CTRL key isn't being holded
  18.         event.preventDefault(); //Prevent it from opening
  19.         window.originalLink = this.outerHTML; //Save link HTML
  20.         this.outerHTML = `<div class='originalLinkPosition'><div class="YTScript"><div style="resize: both;overflow: hidden;width: 555px;height: 373px;position: relative;"><div class="closeButton" style="position: absolute;right: 0px;cursor: pointer;z-index: 10000;">❌</div><iframe style="z-index: 9999;position: absolute;width: 100%;height: 100%;" src="https://www.youtube.com/embed/${this.href.split('&')[0].split('v=')[1]}?autoplay=1" allow="picture-in-picture;" allowfullscreen=""></iframe><div style="left: 96%;top: 96%;width: 120px;height: 30%;z-index: 9999;border-right: 80px solid #D71E1E;position: absolute;transform: rotate(-135deg);"></div></div></div>`; //Add buttons and iframe
  21.         document.querySelector('.closeButton').addEventListener('click', function() { //When the close button is clicked
  22.           document.querySelector('.originalLinkPosition').outerHTML = originalLink; //Restore original link HTML
  23.           document.querySelector('.YTScript').remove(); //Remove embedded YT video
  24.         }); //Finishes the click event listener
  25.         this.remove(); //Remove current link HTML
  26.       } //Finishes the if condition
  27.     }); //Finishes the click event listener
  28.   });  //Finishes the ForEach loop
  29. }).observe(document, { childList: true, subtree: true }); //Run script on page change