YouTube Embed Button Under Video

Adds a button under YouTube videos to open the embed page for the current video.

  1. // ==UserScript==
  2. // @name YouTube Embed Button Under Video
  3. // @namespace https://gf.qytechs.cn/en/scripts/537364-youtube-embed-button-under-video
  4. // @homepageURL https://github.com/almahmudbd
  5. // @version 2.2
  6. // @description Adds a button under YouTube videos to open the embed page for the current video.
  7. // @license GPL-3
  8. // @author unknown
  9. // @match https://www.youtube.com/watch*
  10. // @grant none
  11. // ==/UserScript==
  12.  
  13. (function () {
  14. 'use strict';
  15.  
  16. // Helper to get video ID from current URL
  17. function getVideoId() {
  18. const urlObj = new URL(window.location.href);
  19. return urlObj.searchParams.get('v');
  20. }
  21.  
  22. // Create and insert the embed button under the video
  23. function insertEmbedButton() {
  24. // Avoid duplicate buttons
  25. if (document.getElementById('yt-embed-link-btn')) return;
  26.  
  27. const videoId = getVideoId();
  28. if (!videoId) return;
  29.  
  30. // Find the container below the video (where buttons like Share/Like appear)
  31. // This selector is relatively stable, but may need updating if YouTube changes its layout
  32. const actionsRow = document.querySelector('#top-level-buttons-computed, ytd-menu-renderer #top-level-buttons');
  33.  
  34. if (actionsRow) {
  35. // Create the button
  36. const btn = document.createElement('button');
  37. btn.id = 'yt-embed-link-btn';
  38. btn.textContent = '▶ Open Embed Page';
  39. btn.style.marginLeft = "8px";
  40. btn.style.padding = "6px 12px";
  41. btn.style.background = "#222";
  42. btn.style.color = "#fff";
  43. btn.style.border = "none";
  44. btn.style.borderRadius = "3px";
  45. btn.style.cursor = "pointer";
  46. btn.title = "Open this video in YouTube embed view";
  47.  
  48. btn.onclick = () => {
  49. const embedUrl = `https://www.youtube.com/embed/${videoId}`;
  50. window.open(embedUrl, '_blank');
  51. };
  52.  
  53. // Insert the button at the end of the action row
  54. actionsRow.appendChild(btn);
  55. }
  56. }
  57.  
  58. // Observe for SPA navigation and DOM updates
  59. let lastUrl = location.href;
  60. const observer = new MutationObserver(() => {
  61. if (location.href !== lastUrl) {
  62. lastUrl = location.href;
  63. // Remove button if navigating away (prevents stale button)
  64. const oldBtn = document.getElementById('yt-embed-link-btn');
  65. if (oldBtn) oldBtn.remove();
  66. setTimeout(insertEmbedButton, 700); // Wait a bit for the new page to render
  67. }
  68. // Try to insert the button if not present (handles dynamic loading)
  69. if (!document.getElementById('yt-embed-link-btn')) {
  70. setTimeout(insertEmbedButton, 700);
  71. }
  72. });
  73.  
  74. observer.observe(document.body, { childList: true, subtree: true });
  75.  
  76. // Initial insert
  77. setTimeout(insertEmbedButton, 1000);
  78. })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址