Zach’s ugly mug (his face) Zach Leatherman

Elevating Video Transcripts as Searchable Content

The word CAPTION spelled out in Scrabble tiles
February 27, 2024

I helped work on the Jamstack TV project (now dormant with the rest of the jamstack.org site, though the feature is still up), which used a lovely Algolia integration to allow deep searching of video transcripts. It was a really cool feature.

In The Static Chronicles Twitch stream (episode 1 and episode 2), Mike and I explored an 11ty plugin to output the transcript of a YouTube video to allow video transcripts to be embedded into video posts, thus extending some of this feature to work with Pagefind (the static search engine).

I’ve wired this up on a few video posts on my site (that I know have higher quality transcripts/captions):

The really cool part of these demos is that the actively playing video highlights the currently active portion of the transcript—and you can click any portion of the transcript to skip around on the video!

The Pieces

There are a few web components at play here, but I don’t currently have the energy to formally publish them, so I’ll just link them up here:

  1. An asynchronous Eleventy fetchYoutubeTranscript filter to server-fetch the transcript markup (caching it locally for 7 days).
  2. A WebC component (youtube-deep-link.webc) enhances the caption content (fetched from the fetchYoutubeTranscript filter) with a <youtube-deep-link> custom element for timestamped buttons that point to a lite-youtube element.
  3. A tiny <off-viewport> web component to toggle a class when an element is visible in the viewport. I use this to put the video in the lower corner of the viewport as you scroll through the transcript. This one is a little tricky to use because it can take you into a rendering loop if you absolute/fixed/sticky the position of the off-viewport host element directly (so, uh—don’t do that).

Conclusion

I’ve been making more and more videos and I really like escalating that content as first-party text on my static site too. Investing in high quality closed captions (as a way to make the videos more accessible) elevates the content and aligns it more closely with my existing stack of tools.


IndieWeb Avatar for https://unsplash.com/Poster image by Monica Flores

< Newer
Mechanical Ink: Unpacking the Challenges and Opportunities in Modern Web Development
Older >
Eight Million npm Downloads for Eleventy

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

5 Reposts

Zach Leatherman :verify:Fynn BeckerRyan MulliganBob MonsourSami Määttä

8 Likes

Sahil ????Simon Cox :SEO:Chris ColemanJBEric PortisBrandonhaliphax ????Sami Määttä
3 Comments
  1. Brandon

    @zachleat gee it's like we should have just written blog posts @hexagoncircle

  2. Zach Leatherman :verify:

    @brandonscript @hexagoncircle whew, I agree.

  3. haliphax ????

    @zachleat Holy crap, that is seriously cool ????

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)