YouTube macro lil syntax help

[Jake]

Well, I think you already guessed from the title what this is about.

I wrote this and it actually works:

\define video(url, w:"400px", h:"300px")

<iframe width="$w$" height="$h$" src="""$url$""" frameborder="0" allowfullscreen></iframe>

\end

but I don't want to manually change https://www.youtube.com/watch?v=VIDEOID to https://www.youtube.com/embed/VIDEOID

I think I already know what should be done: "removeprefix" of "https://www.youtube.com/watch?v=" and "addprefix" of "https://www.youtube.com/embed/" if the whole url is inserted or just addprefix if that's only VIDEOID, 

"but"... I don't know what the proper syntax should be ¯\_(ツ)_/¯ .  (as well as I don't quite understand that "triple quotes" thingy).

I've searched the forum and see that someone made even a plugin for that: [Plugin] Embed YouTube Videos. Though I don't understand why you need a whole plugin for that if it's just a very simple macro. But I may check RichLinks later (currently it's just excessive to my needs).

[Eric Shulman]

On Saturday, July 4, 2020 at 11:40:32 PM UTC-7, Jake wrote:

I wrote this and it actually works:

\define video(url, w:"400px", h:"300px")
<iframe width="$w$" height="$h$" src="""$url$""" frameborder="0" allowfullscreen></iframe>
\end

but I don't want to manually change https://www.youtube.com/watch?v=VIDEOID to https://www.youtube.com/embed/VIDEOID.  I think I already know what should be done: "removeprefix" of "https://www.youtube.com/watch?v=" and "addprefix" of "https://www.youtube.com/embed/" if the whole url is inserted or just addprefix if that's only VIDEOID, "but"... I don't know what the proper syntax should be ¯\_(ツ)_/¯ .  (as well as I don't quite understand that "triple quotes" thingy).

First, the "triple quotes" thingy:

When substituting the $url$ macro parameter value into the iframe, there is a possibility, no matter how remote, that the $url$ value could contain double-quote characters (").  In that case, if the iframe parameter was just src="...", then the substitution would result in nested or unmatched quotes (i.e., src="http://stuff?arg="quoted stuff"&more=123&..."), which would break the syntax since nested quotes are not handled by HTML parameters.  To address this, TiddlyWiki extends the normal HTML parameter syntax to enable use of tripled double-quotes as outer delimiters so that the enclosed text can contain instances of double-quotes without breaking.  Note that the same nested quotes issue can also be resolved by using single-quotes (i.e., src='...' - supported by standard HTML) or even doubled squarebrackets (i.e., src=[[...]] - another TiddlyWiki syntax extension).

Next, how to do the removeprefix/addprefix filter:

In addition to the special quote handling described above, TiddlyWiki extends the normal HTML parameter syntax to allow use of "inline filters" (the tripled curly braces stuff).

To achieve your desired results, you would write the iframe's src="..." parameter like this:

src={{{ [[$url$]removeprefix[https://www.youtube.com/watch?v=]addprefix[https://www.youtube.com/embed/]] }}}

The first part of the filter simply starts with the provided url as literal text (i.e, enclosed in square brackets).  Then, the removeprefix[...] filter operator is applied to that text, followed by the addprefix[...] filter operator.  The end result is the desired URL text, which is then used as the value of the HTML src=... parameter.  Note that the entire filter syntax is contained in a matched set of outer square brackets, which is then contained in the tripled curly braces that indicate use of an inline filter.

Using the inline filter, your macro definition would look like this:

\define video(url, w:"400px", h:"300px")

<iframe width="$w$" height="$h$" src={{{ [[$url$]removeprefix[https://www.youtube.com/watch?v=]addprefix[https://www.youtube.com/embed/]] }}} frameborder="0" allowfullscreen></iframe>
\end

One more note... to make the code a bit easier to understand, you could use a couple of variables to define the values of the prefixes and the modified src URL, like this:

\define video(url, w:"400px", h:"300px")

<$vars old="https://www.youtube.com/watch?v=" new="https://www.youtube.com/embed/">
<$vars src={{{ [[$url$]removeprefix<old>addprefix<new>] }}}>
<iframe width="$w$" height="$h$" src=<<src>> frameborder="0" allowfullscreen></iframe>
</$vars>
</$vars>
\end

As you can see, TiddlyWiki filter syntax can be a bit confusing at first but it's also VERY powerful and can help you achieve lots of magical stuff.

enjoy,

-e

[Mat]

There's now actually a convenient split+join filter operator combination that makes it simple to replace a string for another

\define video(url, w:"400px", h:"300px")

<iframe width="$w$" height="$h$" src={{{ $url$ +[split[watch?v=]join[embed/]] }}} frameborder="0" allowfullscreen></iframe>
\end

<:-)

[Eric Shulman]

Good catch!  This does make the replacement much simpler. 

The split[] chops the URL into two parts and automatically removes the "watch?v=" syntax.

Then, the join[] connects those two parts together and automatically inserts the "embed/" syntax.

One minor tweak I would suggest: enclose the $url$ in brackets just in case it contains something that would otherwise break the filter:

src={{{ [[$url$]split[watch?v=]join[embed/]] }}}

-e

[Mat]

Eric Shulman wrote:

One minor tweak I would suggest: enclose the $url$ in brackets just in case it contains something that would otherwise break the filter:

That's a good point for this case. I do generally find it better to avoid the brackets when possible because I (painfully) discovered they leave "bracket artefacts" if the argument is missing, e.g you'd think the following would give "0 vs 0" but...

\define x(nothing) {{{ [[$nothing$]count[]] }}} vs {{{ $nothing$ +[count[]] }}}

<<x>>

<:-)

[Jake]

Yep, that worked! 

Using the inline filter, your macro definition would look like this:

\define video(url, w:"400px", h:"300px")
<iframe width="$w$" height="$h$" src={{{ [[$url$]removeprefix[https://www.youtube.com/watch?v=]addprefix[https://www.youtube.com/embed/]] }}} frameborder="0" allowfullscreen></iframe>
\end

 

As well as this: 

One more note... to make the code a bit easier to understand, you could use a couple of variables to define the values of the prefixes and the modified src URL, like this:

\define video(url, w:"400px", h:"300px")
<$vars old="https://www.youtube.com/watch?v=" new="https://www.youtube.com/embed/">
<$vars src={{{ [[$url$]removeprefix<old>addprefix<new>] }}}>
<iframe width="$w$" height="$h$" src=<<src>> frameborder="0" allowfullscreen></iframe>
</$vars>
</$vars>
\end

And even this: 

 

\define video(url, w:"400px", h:"300px")


<iframe width="$w$" height="$h$" src={{{ $url$ +[split[watch?v=]join[embed/]] }}} frameborder="0" allowfullscreen></iframe>
\end


 

In the end I decided to stick with this final macro:

\define vid(id, w:"534px", h:"300px")

<iframe src={{{ [[$id$]addprefix[https://www.youtube.com/embed/]] }}} width="$w$" height="$h$"  frameborder="0" allowfullscreen></iframe>

\end

and usage like: <<vid "ScjChJDp3mo">>

Don't want to deal with youtube.com/youtu.be and https:/http: in the future.

Btw, did I get it right that you don't need to specify (parameters/variables - whatever they're called) of the macro when calling it and if their names are omitted macro just handles them in a specified order?

So I don't need to write: <<vid id:"VIDEOID" w:"640" h:"360">> and I can write just <<vid "VIDEOID" "640" "360">>?

Thanks Eric and Mat! And Eric especially for the comprehensive lecture. Too bad it would be forever lost in the annals of this forum. I think it could be usefull to many other newbies. 

I think someone should seriously think about "TW Online Tutorial" (with some learning curve, cases, recipies etc), becase as I said earlier tiddlywiki.com is of course very usefull, but provide not very much in terms of "learning". In most cases there are just parameter descriptions and very basic usage. And Working with TiddlyWiki section is very limited as well. 

enjoying,

 \ (•◡•) /

 

[Eric Shulman]

On Sunday, July 5, 2020 at 4:43:45 AM UTC-7, Jake wrote:

In the end I decided to stick with this final macro:

\define vid(id, w:"534px", h:"300px")
<iframe src={{{ [[$id$]addprefix[https://www.youtube.com/embed/]] }}} width="$w$" height="$h$"  frameborder="0" allowfullscreen></iframe>
\end

and usage like: <<vid "ScjChJDp3mo">>.  Don't want to deal with youtube.com/youtu.be and https:/http: in the future.

Good thinking.  While there are many different URLs that can be used to get to a specific YouTube video page, the all rely on the same unique "video code".

 

Btw, did I get it right that you don't need to specify (parameters/variables - whatever they're called) of the macro when calling it and if their names are omitted macro just handles them in a specified order?

So I don't need to write: <<vid id:"VIDEOID" w:"640" h:"360">> and I can write just <<vid "VIDEOID" "640" "360">>?

That is correct.  If you omit the names in the macro parameters, then they are simply matched up, left-to-right, with the macro definition.

The only drawback is that if you want to skip a particular parameter (allowing it's default to be used), then you need to use a "placeholder" in the macro call.

For example, using your "vid" macro as above, if you wanted to specify the height, but not the width, you would need to write this:

<<vid "ScjChJDp3mo" "" "500px">>

in contrast, if you *do* use the parameter names, you don't need a placeholder:

<<vid id:"ScjChJDp3mo" h:"500px">>

-e 

[Jake]

A little related additional question. I sorted out with YouTube, but what if I want to play .mp4 inside TW?

I tried both <iframe> and <video> tags, but they didn't work. For example if I want a video from https://somesite.com/somevideo.mp4 to play and write:

<iframe src="https://somesite.com/somevideo.mp4"></iframe>

or 

<video> 

<source src="https://somesite.com/somevideo.mp4">

</video>

I get nothing. Am I doing smth wrong or are there some TW limitations I'm not aware of?

[Jake]

errrm... guys?.. anyone?... 

[Siniy-Kit]

The problem that, if your start playing video in iframe, and go to another tiddler, this video will not stop and you will hear the sound of it. 

I test it, but I dont see this video in static cut (( help please.

<$list filter="[is[current]list[$:/HistoryList!!current-tiddler]limit[1]]" >

<iframe width="560" height="315" src="https://www.youtube.com/embed/1osWmCbGkH8?start=349" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</$list>

воскресенье, 5 июля 2020 г., 14:43:45 UTC+3 пользователь Jake написал: