Youtube macro - looking for feedbacks

Hi everyone, I’ve made a macro that output an iframe from a youtube video url :

It handle playlist and solo youtube videos, and you can use (almost) all of the parameters listed here : Paramètres du lecteur  |  YouTube API iFrame  |  Google Developers

The code is a bit messy so I’d be grateful if someone can improve upon it/provide some tips :slight_smile:


This is lovely! specially the chapter buttons at the top to let view any section you like!
Thank you for sharing!


Thanks a lot @Mohammad ! The buttons are not part of the macro but it would be great if there was a way to generate them automatically to take notes on a video, like udemy does for example. It would require javascript though so I’m not sure how to do that …

I use this youtube annotation plug in (although its not packaged as plug in) made by tobibeer in my wiki. I like the fact that i can add notes with timestamp (which are separate tiddlers). I think you are aware of this one, just sharing it again in case you missed it.

1 Like

@arunnbabu81 I don’t like the fact that it requires to manually set the id of the video but I do like the annotations feature ! I’ll try to add that to my version, thanks for sharing this :slight_smile:

1 Like

With the help of tiddlyclip, i got a solution to avoid manual setting of id of the video. See this discussion in tiddlyclip github page

1 Like

It would be useful if timestamps against a video could be used to trigger actions or the display of tiddler notes as it plays.

The viewing a video through tiddlywiki could add resources etc…

This also stands for audio files.


Somewhat related, does anyone know how much bandwidth prefetching occurs when viewing a YouTube iframe embed? I just used this with a rather unstable connection and it took a really long time to load the iframe. I’m wondering if there is a different approach because I often browse my tiddlywiki without an internet connection or on mobile. I am content with downloading the thumbnail and storing that locally, but I’m not sure how you can mix local content with a YouTube iframe.

Could you just not create a thumbnail saved in you wiki, wrapped in a button, that when you click it, the iframe is revealed?

  • Use a temp tiddler as the state tiddler, so the last state is erased at each wiki load.
  • This could be made conditional on mobile use or when using a particular browser.

yes using a state tiddler is a good approach. I would like to write my macro like this.

<<yt-embed "vsdDs7oOLlg" "Experience TiddlyWiki Fluency: Creating a Reading List">>

For those who are curious, it only prefetches the thumbnail which usually isn’t too big, but on unstable connections it can be quite slow to actually load the iframe. @TW_Tones , do you have an example of how to use a state tiddler in this situation?

Here is a working example you may make use of.

  • I hope this was what you were looking for.
\procedure display-iframe()
\procedure display-thumbnail()

<$let state=<<qualify $:/temp/myframe>> >
<$button tag=div popupTitle=<<state>> tooltip="click to toggle">
   <$list filter="[<state>has[title]]" variable=~ emptyMessage=<<display-thumbnail>> >
  • I made the state tiddler title a variable with a qualified value
    • Defining a variable makes it easier to see and modify if using more than once in this tiddler.
    • using the $:/temp/ prefix should stop it being saved for next wiki load
  • I use a button and its popupTitle which is a handy way to toggle the existence of the state tiddler.
    • this way you need only one button widget
    • It has a html tag of div so does not look like a button
    • It has a tooltip you will see on hover in both “states”
  • Inside the button I test if the state tiddler has a title (exists) if it does, we display the content which is the iframe, if not we use empty message to display the thumbnail.
  • There may be a way to ensure the iframe starts to load behind the thumbnail someone can suggest.
  • Of course you could move the whole thing into a macro
    • Just ask if you want me to.

Here’s an updated version of my macro using the new substitutions features + thumbnail for lazy loading:

\procedure yt(https,inline-style,class,index,start:"0",end,autoplay:"1",cc_lang_pref,cc_lang_pref,cc_load_policy,color,controls,disablekb,fs,hl,iv_load_policy:"3",modestbranding:"1")

videoId={{{ [<https>split[v=]split[/]last[]split[?]split[&]first[]] }}}
title='YouTube video player'
class='video $(class)$'
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture, web-share'
font:48px/1.5 sans-serif;
text-shadow:0 0 0.5em black
<a href='$(embedUrl)$'>
srcset='$(videoId)$/default.webp 500w,$(videoId)$/maxresdefault.webp 1000w'
<!-- Doc : -->
\end yt

Demo: Video widget — a non-linear personal web notebook

This should only load the thumbnail, until you click on it. Due to google policy on autoplaying videos, you will need to click twice the first time the video is loaded: Chrome 中的自动播放政策  |  Blog  |  Chrome for Developers

Would be great to add a feature like webvtt-player (


This is great, only one click to play on my FireFox. :nerd_face:

1 Like

Hi @telumire, this is really great, and I would like to replace my own version with yours.

IN my version I insert the part by the macro so that the macro looks neat with just the id like <<yt kd935uJOxXc>>.

Could you make a tweak tha also “eats” that shorthand?

It already work with only the id of the video :slight_smile:[[yt%20player%20macro%20demo]]%20[[yt%20player%20macro]]

1 Like

Hi @telumire,
thank you! Another deep desire I had for a long time would be the option to have autofullscreen on play. Do you think that could be achieved with your macro?

I sincerely hope not! Sorry, but that is a behavior that I as a user would despise. I would hope that browsers simply do not support it. Any place that I use video (and it’s not that many, I suppose; I’m a text kind of guy!) lets me choose when to enter and leave full screen. That’s fine. Having a site choose it for me when I hit “Play” would send me as far away from that site as I can get.

But i expect you would be happy if you made a video tiddler full screen before hand that would he fine.

It would also interfear with default tiddler behaviour.

Perhaps make a play full screen button and label it as such


Nice feature, I do link to youtube alot on my wikis.
Here are my 2 cents:

  • links to chapters might be more useful if instead of a pre-defined lenght they could be imported from youtube source video since some authors already mark on their videos timestamps for each chapter.

  • any update on the anotation system solution?

  • how come can we make webvtt-player to work with yt-macro?

Probably those features might be merged on a simple solution that allows you to type and assign anotations on specific chapters…

Hi @Scott_Sauyet, I wrote it would be great to have the option to go full-screen on play. When I was giving a lecture with many videosnippets it was a hustle to switch forward and backward manually with the video already playing.