[Feature Request] YouTube Embeds

[loregamer]

Describe the problem

Can you guys make it so YouTube embeds use an iframe and displayed like this?

Describe the solution you'd like

I've made a userscript to make this possible, but would be nice if built in:

(function () {
  "use strict";

  function fixYouTubeEmbeds() {
    const embedContainers = document.querySelectorAll(
      "div.prxiv40._1mqalmd1._1mqalmd0.prxiv41.prxiv41t._1pb2z300"
    );

    embedContainers.forEach((container) => {
      const link = container.querySelector('a[href*="youtu"]');
      if (link) {
        const url = new URL(link.href);
        let videoId;

        if (url.pathname.includes("/watch")) {
          videoId = url.searchParams.get("v");
        } else if (url.pathname.includes("/shorts/")) {
          videoId = url.pathname.split("/shorts/")[1].split("?")[0];
        } else if (url.hostname === "youtu.be") {
          videoId = url.pathname.slice(1).split("?")[0];
        }

        if (videoId) {
          const embed = document.createElement("iframe");
          embed.src = `https://www.youtube.com/embed/${videoId}`;
          embed.width = "480";
          embed.height = "270";
          embed.frameBorder = "0";
          embed.allow =
            "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
          embed.allowFullscreen = true;

          // Find the scroll container before modifying the DOM
          const scrollContainer = document.querySelector(
            "div._4yxtfd2._1mqalmd1._1mqalmd0._4yxtfd4._4yxtfdc._4yxtfdg._4yxtfdi._4yxtfdn"
          );
          const scrollBottom = scrollContainer
            ? scrollContainer.scrollHeight -
              scrollContainer.scrollTop -
              scrollContainer.clientHeight
            : 0;

          container.innerHTML = "";
          container.appendChild(embed);

          container.className = "";
          container.style.display = "flex";
          container.style.justifyContent = "center";
          container.style.alignItems = "center";

          // Adjust scroll position if we were at the bottom
          if (scrollContainer && scrollBottom < 10) {
            scrollContainer.scrollTop = scrollContainer.scrollHeight;
          }
        }
      }
    });
  }

  function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
      const later = () => {
        clearTimeout(timeout);
        func(...args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  }

  function setupObservers() {
    const debouncedFixEmbeds = debounce(fixYouTubeEmbeds, 100);

    const intersectionObserver = new IntersectionObserver(
      (entries) => {
        if (entries.some((entry) => entry.isIntersecting)) {
          debouncedFixEmbeds();
        }
      },
      { subtree: true, childList: true }
    );

    intersectionObserver.observe(document.body);

    const mutationObserver = new MutationObserver((mutations) => {
      if (
        mutations.some(
          (mutation) =>
            mutation.type === "childList" && mutation.addedNodes.length > 0
        )
      ) {
        debouncedFixEmbeds();
      }
    });

    mutationObserver.observe(document.body, { childList: true, subtree: true });
  }

  function initializeScript() {
    fixYouTubeEmbeds();
    setupObservers();
  }

  initializeScript();
})();

Alternatives considered

No response

Additional context

No response

[notramo]

Definitely wouldn't be nice if built-in. I recommend to use Discord if you want embedded tracker in your messaging app. Cinny is meant to be private.

[Handrail9]

Definitely wouldn't be nice if built-in. I recommend to use Discord if you want embedded tracker in your messaging app. Cinny is meant to be private.

I agree with this guys sentiment even if a bit caviler. Maybe make it a toggle to turn embeds on and off, ot better yet allow users to customize posted links to redirect to private front ends. Google doesnt need my IP address, but if other people want to make that decision for themselves I say let them.