Youtube embed error

I’m trying to embed a youtube video into a tiddler using code extracted from this demo but get:

The html extracted from the demo source checks out on html-tester and renders as expected.

<iframe allow="autoplay; encrypted-media" allowfullscreen="true" frameborder="0" height="315" src="https://www.youtube.com/embed/08UcDFqTtwk" width="560"></iframe>

The demo site runs as expected in same browser, Firefox 108, as where I’m editing my TiddlyWiki.

It works over there! Why won’t it work in my TW? What could the problem be? Any ideas?

Thanks,

TechTangle

A quick check on the latest version of tiddlywiki as a local single file, chrome and Firefox and on a bob wiki all show its working.

Did you set the type of your tiddler to text/html? I got the same error:

Leave the type blank or set it to text/vnd.tiddlywiki (the default):

Might interest you: I made a macro for youtube videos : Curated Videos — Hand-picked video content to explore beyond the algorithm

3 Likes

@telumire You’re quite correct I had set the tiddler type to text/html changing it as you suggested fixed the issue. :star_struck: Will checkout the macro, looks interesting. Thankyou.

Very nice tool :slight_smile:

I tried it out - but not with all videos working - eg:

<<video url:https://www.youtube.com/shorts/TcT403-oJVY[{!!video}]>>

<<video url:https://www.youtube.com/watch?v=WK9wevdVniA[{!!video}]>>

Does someone has also a solution for streaming (.smil)?

Yes I didn’t take into account the youtube short url format. You can link to the video of the short:

<<video "https://www.youtube.com/watch?v=TcT403-oJVY">>

Or like this, using the video field of the current tiddler:

<<video "[{!!video}]">>

I’ll fix it when I have more free time

Thanks a lot… :+1:

This should work with yt shorts: Video player — add videos to your wiki

\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]] ~[<https>search[,]] }}}
videoId={{{ [<https>split[/]split[v=]last[]split[?]split[&]first[]] }}}
thumbnailId={{{ [<videoId>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>search[,]addprefix[?playlist=]]
[<list>!is[blank]addprefix[?list=]]
:else[<videoId>addsuffix[?]]
}$$(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/$(thumbnailId)$/default.webp'
srcset='
https://i.ytimg.com/vi_webp/$(thumbnailId)$/default.webp 500w,
https://i.ytimg.com/vi_webp/$(thumbnailId)$/maxresdefault.webp 1000w'
alt="Video"
>
<span>▶</span>
</a>
```/>
<!-- Doc : https://developers.google.com/youtube/player_parameters -->
\end yt

demo: Video player — add videos to your wiki

Thanks @telumire - that works fine - great! :+1:

Do you have also an idea, how to implement a website into Tiddlywiki using JW Player?

eg: https://www.vml.com/

Thanks in advance,
Stefan

I don’t know about JW Player but if you want to display this specific video on your tiddlywiki you can right click > inspect, and you’ll find a .mp4 url: https://res.cloudinary.com/dotcom-prod/video/upload/h_720,vc_auto,w_1280/v1702031381/vml-videos/welcome_to_vml.mp4

You could use the video element to display that video in your wiki (assuming the video link is static), but this wont work for every video player

Yes, I can inspect the website and I’ll find the url.

Putting this url into tiddlywikki will show only the link and not the embedded preview of the video.

You need to use the video element:

<video controls width="100%" poster="https://res.cloudinary.com/dotcom-prod/video/upload/ar_16:9,c_pad,f_auto,q_auto,so_5,w_600/v1702031381/vml-videos/welcome_to_vml.jpg">
  <source src="https://res.cloudinary.com/dotcom-prod/video/upload/h_360,vc_auto,w_640/v1702031381/vml-videos/welcome_to_vml.mp4" type="video/mp4" />
  <source src="https://res.cloudinary.com/dotcom-prod/video/upload/h_540,vc_auto,w_960/v1702031381/vml-videos/welcome_to_vml.mp4" type="video/mp4" />
  <source src="https://res.cloudinary.com/dotcom-prod/video/upload/h_720,vc_auto,w_1280/v1702031381/vml-videos/welcome_to_vml.mp4" type="video/mp4" />
</video>

or like this :

<video controls width="100%"  src="https://res.cloudinary.com/dotcom-prod/video/upload/h_720,vc_auto,w_1280/v1702031381/vml-videos/welcome_to_vml.mp4" type="video/mp4" />

Depending on if you want (or can) provide alternative resolutions for mobile user.

See The Video Embed element - HTML: HyperText Markup Language | MDN (mozilla.org) for a full list of the options you can use.

Nice, thanks a lot - works like a charm!

1 Like