☰

TikTok on YouTube Shorts

Embed TikTok videos on YouTube Shorts page and add a TikTok search bar

  1. // ==UserScript==
  2. // @name         TikTok on YouTube Shorts
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Embed TikTok videos on YouTube Shorts page and add a TikTok search bar
  6. // @author       You
  7. // @match        https://www.youtube.com/shorts/*
  8. // @match        https://www.youtube.com/results?search_query=*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     function addTikTokEmbed() {
  16.         // Ensure this only runs on YouTube Shorts pages
  17.         if (window.location.href.includes("shorts")) {
  18.             // Create an iframe for TikTok video
  19.             const tiktokIframe = document.createElement('iframe');
  20.             tiktokIframe.width = "300";
  21.             tiktokIframe.height = "500";
  22.             tiktokIframe.style.marginTop = "20px";
  23.             tiktokIframe.style.border = "none";
  24.             tiktokIframe.src = "https://www.tiktok.com/embed/v2/VIDEO_ID"; // Replace VIDEO_ID with the actual TikTok video ID
  25.  
  26.             // Append TikTok iframe below the Shorts video
  27.             const videoContainer = document.querySelector("ytd-rich-grid-media");
  28.             if (videoContainer) {
  29.                 videoContainer.appendChild(tiktokIframe);
  30.             }
  31.         }
  32.     }
  33.  
  34.     function addSearchBar() {
  35.         // Ensure this only runs on YouTube search results pages
  36.         if (window.location.href.includes("search_query")) {
  37.             // Create a search bar for TikTok
  38.             const searchBar = document.createElement('div');
  39.             searchBar.style.marginTop = "20px";
  40.             searchBar.style.padding = "10px";
  41.             searchBar.style.backgroundColor = "#f1f1f1";
  42.             searchBar.style.border = "1px solid #ccc";
  43.             searchBar.style.borderRadius = "5px";
  44.             searchBar.style.textAlign = "center";
  45.  
  46.             const searchLabel = document.createElement('h3');
  47.             searchLabel.textContent = "From TikTok";
  48.             searchBar.appendChild(searchLabel);
  49.  
  50.             // Add a form for TikTok search
  51.             const searchForm = document.createElement('form');
  52.             searchForm.action = "https://www.tiktok.com/search";
  53.             searchForm.method = "get";
  54.  
  55.             const searchInput = document.createElement('input');
  56.             searchInput.type = "text";
  57.             searchInput.name = "q";
  58.             searchInput.placeholder = "Search TikTok...";
  59.             searchInput.style.width = "80%";
  60.             searchInput.style.padding = "5px";
  61.             searchInput.style.marginBottom = "10px";
  62.             searchForm.appendChild(searchInput);
  63.  
  64.             const searchButton = document.createElement('button');
  65.             searchButton.type = "submit";
  66.             searchButton.textContent = "Search";
  67.             searchButton.style.padding = "5px 10px";
  68.             searchButton.style.cursor = "pointer";
  69.             searchForm.appendChild(searchButton);
  70.  
  71.             searchBar.appendChild(searchForm);
  72.  
  73.             // Append the search bar above the search results
  74.             const searchContainer = document.querySelector("#container");
  75.             if (searchContainer) {
  76.                 searchContainer.insertBefore(searchBar, searchContainer.firstChild);
  77.             }
  78.         }
  79.     }
  80.  
  81.     // Run functions initially
  82.     addTikTokEmbed();
  83.     addSearchBar();
  84.  
  85.     // Observe changes to URL to reload TikTok embed and search bar on page changes
  86.     const observer = new MutationObserver(() => {
  87.         addTikTokEmbed();
  88.         addSearchBar();
  89.     });
  90.  
  91.     observer.observe(document.body, { childList: true, subtree: true });
  92.  
  93. })();