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 
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 …
http://youtube.tiddlyspot.com/#Introduction%20To%20TiddlyWiki
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.
@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
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
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?
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.
\procedure display-iframe()
iframe
\end
\procedure display-thumbnail()
thumbnail
\end
<$let state=<<qualify $:/temp/myframe>> >
<$button tag=div popupTitle=<<state>> tooltip="click to toggle">
<$list filter="[<state>has[title]]" variable=~ emptyMessage=<<display-thumbnail>> >
<<display-iframe>>
</$list>
</$button>
</$let>
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")
<$let
list={{{[<https>split[list=]nth[2]]}}}
videoId={{{ [<https>split[v=]split[/]last[]split[?]split[&]first[]] }}}
params=`${[<list>is[blank]then[?]else[&]]}$&index=$(index)$&start=$(start)$&end=$(end)$&autoplay=$(autoplay)$&cc_lang_pref=$(cc_lang_pref)$&cc_load_policy=$(cc_load_policy)$&color=$(color)$&controls=$(controls)$&disablekb=$(disablekb)$&fs=$(fs)$&hl=$(hl)$&iv_load_policy=$(iv_load_policy)$&modestbranding=$(modestbranding)$`
embedUrl=`https://www.youtube-nocookie.com/embed/${[<list>!is[blank]addprefix[?listType=playlist&list=]else<videoId>]}$$(params)$`
>
<iframe
title='YouTube video player'
style='width:100%;aspect-ratio:16/9;border:0;max-height:100vh;$(inline-style)$;'
class='video $(class)$'
src='$(embedUrl)$'
allowfullscreen
allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture, web-share'
loading='lazy'
srcdoc=```
<style>
img{width:100%;}
img,span{position:fixed;inset:0;margin:auto;}
span{
height:1lh;
text-align:center;
font:48px/1.5 sans-serif;
color:white;
text-shadow:0 0 0.5em black
}
</style>
<a href='$(embedUrl)$'>
<img
src='https://i.ytimg.com/vi_webp/$(videoId)$/default.webp'
srcset='
https://i.ytimg.com/vi_webp/$(videoId)$/default.webp 500w,
https://i.ytimg.com/vi_webp/$(videoId)$/maxresdefault.webp 1000w'
alt="Video"
>
<span>▶</span>
</a>
```/>
<!-- Doc : https://developers.google.com/youtube/player_parameters -->
\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 (umd-mith.github.io)
This is great, only one click to play on my FireFox. 
Hi @telumire, this is really great, and I would like to replace my own version with yours.
IN my version I insert the https://www.youtube.com/watch?v= 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
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
Hi!
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.