CODEWITHSUNDEEP
javascriptiframeyoutubeaccessibility
jtbnnx
jtbnnx

Reputation: 3

How can I modify a component of a youtube iframe for accessibility?

I have an <iframe> with a youtube video, this video has a logo of the youtube channel and if you click it takes you to the channel, so far so good. But for accessibility reasons, when navigating by keyboard it should work in the same way when you press the ‘Enter’ key. And it doesn't let me access to the component with the class .ytp-title-channel-logo to add a script that when you click enter it works as a click, I guess it's a Youtube thing.

It's html and JS.

Any suggestions?

This is the code I have at the moment:

(function () {
  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  window.addEventListener("load", () => {
    const iframe = document.getElementById("video2_youtube");

    try {
      const player = new YT.Player(iframe, {
        events: {
          onReady: (event) => {
            console.log("Player ready");
          },
          onError: (event) => {
            console.error("Error in the player:", event);
          },
        },
      });
      console.log(player.getIframe());
      console.log(player.getIframe().getElementsByTagName("body")); //dont show anything
    } catch (error) {
      console.error("Initialisation error:", error);
    }
  });
})();

I've tried using the Youtube API but I don't know if I'm doing it right or not.

If I create the Player object from the API and use player.getIframe() it returns the iframe but doing a querySelector from a component inside doesn't work. I understand that inside the iframe there is another DOM and that's why I can't select it from the JS.

Upvotes: 0

Views: 29

Answers (1)

Andr&#233; Polykanine
Andr&#233; Polykanine

Reputation: 3449

Unfortunately, you can do nothing here.
If you believe it's a YouTube bug, you can report it to Google's Disability Support.

Upvotes: 1

Related Questions