How to customize embedded YouTube video players?

0
votes

When you embed a YouTube video using its provided <iframe> code: you're not able to hide title and a couple other "features".

Some of these features could be disabled using parameters, back in a day. As of now: they're deprecated.

So, now I'm left with a client that needs to embed YouTube videos without all of that junk we see when hovering over the video: title, related videos, channel logo, etc.

1
iframeyoutube

1 Answers

0
votes

From what I've researched, it's not possible to disable title and a some other features: be it using URL parameters or CSS+JS.

Although, I've come with a solution that has a lot of potential: not only for user's privacy, but also for UX. This solution is:

  1. figuring out a way to extract YouTube videos source URL;
  2. using extracted URL in <video> or <iframe>;
  3. replicate YouTube player styles.

For the first part, I've used Invidious API. But I think you can also create an API that uses youtube-dl to extract videos URL (?).

In my tests, I didn't even had to install my own isntance of Invidious: I've used public API endpoints:

https://yewtu.be/latest_version?id=dasdsa312&itag=84

Where:

  • id: video ID;
  • itag: video stream format code.

Then, I made JavaScript code to:

  • dynamically get all available Invidious public instances;
  • generate a video element with sources to many different video quality and available instances.

These sources are generated depending on the query parameters available in my website URL:

https://riservato-xyz.frama.io/watch/?v=gprAWYQ47uY

With that in mind, whenever I need a customized YouTube player, I can use my own website to embed YouTube videos.

I understand the testing website (former url) is slow, indeed. Although, this is because I'm not using my own Invidious instance and rely on public instance. BUT IT WORKS!

<iframe width="560" 
        height="315" 
        src="https://riservato-xyz.frama.io/watch/?v=W_xIBfrdxQU" frameborder="0"></iframe>