video embed macro(?)

[Sapphireslinger]

(Background: I found a hack for embedding responsive video at https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed)

I assume it is code bloat to keep pasting 

<div class="container"><iframe src={{!!url}} 

frameborder="0" allowfullscreen class="video"></iframe></div> 

into every video tiddler. 

So I put this in a tiddler tagged $:/tags/ViewTemplate and it works: 

<$list filter="[<currentTiddler>tag[video]]">

<div class="container"><iframe src={{!!url}} 

frameborder="0" allowfullscreen class="video"></iframe></div>

</$list>

But it broke this: 

<$list filter="[tag[Video Collection - Foo]sort[title]]">

   <$button class="tc-btn-invisible tc-tiddlylink" message="tm-modal" param=<<currentTiddler>>>

      <b><$text text={{!!caption}}/></b>

   </$button><br>

</$list>

Clicking a link still brings up a modal but there is nothing in it now. 

[Sapphireslinger]

How do I turn this into a macro (say called "video")

<div class="container"><iframe src={{!!url}} 

frameborder="0" allowfullscreen class="video"></iframe></div>

so that I can shoehorn it in here something like:

<$list filter="[tag[Video Collection - Foo]sort[title]]">

   <$button class="tc-btn-invisible tc-tiddlylink" message="tm-modal" param=<<video "currentTiddler">>>

      <b><$text text={{!!caption}}/></b>

   </$button><br>

</$list>

Many thanks for any help. I can't figure out macros :(

[Mat]

First, I would think that your things break because of your single quotes for the filter. When you type e.g

<$list filter="[tag[Foo]]">

...then whatever tiddlers are tagged Foo must not have any quote characters. To prevent this, use triple quotes, i.e:

<$list filter="""[tag[Foo]]""">

For your last question, to turn things into a macro etc, you can try this. I'm not really familiar with modals so maybe it won't work:

\define video()

<div class="container"><iframe src="$(url)$" frameborder="0" allowfullscreen class="video"></iframe></div>

\end

<$list filter="""[tag[Video Collection - Foo]sort[title]]""">

<$vars url={{{ [{!!title}get[url]] }}} >

   <$button class="tc-btn-invisible tc-tiddlylink" message="tm-modal" param=<<video>> >

      <$text text={{!!caption}}/>

   </$button><br>

</$vars>

</$list>

<:-)