Invidious embed instead of Youtube's

When I thought about writing my blog post titled To Zinda Ho Tum, I was dilemma. Situation being, I couldn’t simply copy the poem in my blog. A simple attribution wouldn’t be enough. Then I remembered about Farhan Akhar’s narration of the poem for the movie ZKMD. I thought about embedding this video along with my thoughts on it.

Now another dilemma arouse as YouTube even in it’s “Privacy-Enhanced mode” embed states:

When you turn on privacy-enhanced mode, YouTube won’t store information about visitors on your website unless they play the video.

— YouTube¹

The last part troubled me. If a visitor on my blog views the video, he would be unknowingly feeding their information to YouTube and Google service for ad tracking.

Then I remembered about Invidious, an open source, alternate privacy centric front to YouTube which doesn’t track. Delighted, I searched how to embed video using Invidious’s official instance invidio.us but to no avail. A reply in the forum post finally helped. It said to replace YouTube’s URL in the embed code with invidio.us’s. Tried and it worked. Now I could embed any YouTube video without Google’s tracking.

About Invidious

Invidious is an alternative front-end to YouTube licensed under AGPLv3+. Other than privacy feature, it supports Audio-only mode, Onion support, Dark mode, doesn’t require JavaScript to play video, doesn’t require Google account to save subscriptions and absolutely no ads.

invidio.us is the official instance. List of other public instances can be found here. Some instances offer downloads too.

For Hugo users

Hugo provides shortcodes for Vimeo, YouTube and a bunch of services. A shortcode is a simple HTML snippet inside a content file that Hugo will render using predefined template. It can accept arguments too. For example in our case the link of the video.

Invidious doesn’t have a predefined shortcode in Hugo, so we’ll go into how I created one for this post. Let’s create:

1. Make a new sub-directory inside layouts. Name it shortcodes.
2. Inside shortcodes, create a file named invidious.html.
3. Define your shortcode HTML inside it.

<div class='embed-container'>
 _ <iframe src='https://invidio.us/embed/{{ index .Params 0 }}'
	 frameborder='0' allowfullscreen>
  _</iframe>
</div>

Notice the {{ index .Params 0}} . This accepts the link argument from content file.

Now let’s use the shortcode:

1. Inside you’re content file, write

{{ < invidious LINK > }}

Link here only means the alphanumeric text after "=" in video URL like Lni3YbDRmpY in https://invidio.us/watch?v=Lni3YbDRmpY.

Note — To use above shortcode, there is no space between the curly brackets and side arrows like shown here. Writing shortcode triggered my shortcode implementation, so had to resort to putting a link.

Learn more about creating your shortcode here or see a list of codes for some other shortcodes here and here.

PS: Now that invidio.us is no longer available, try invidious.snopyta.org or one from the list of public instances for the embed.

PSS: I wrote a The creator of Invidious, Omar Roth stepped away from the project, my thoughts about it can be found here.