šŸ“¹ HTML5-Video KirĀ­byĀ­tag


Published on


This is aĀ demo-page1 of my HTML5-Video Tag for Kirby. For all videos on this page Iā€™ve proĀ­vided .webm, .mp4, and .gif source-files which are priĀ­orĀ­iĀ­tized in thisĀ order.


<!-- 1. Default-Style -->
(video: name)
<!-- 2. GIF-Style -->
(video: name preset: gif)
<!-- 3. Same as Default-Style -->
(video: name options: lazyload controls)
<!-- 4. Same as GIF-Style -->
(video: name options: lazyload autoplay loop muted playsinline)
<!-- 5. Define Sizing & Autoplay -->
(video: name width: 200px options: lazyload autoplay controls loop)
<!-- 6. Define Placeholder-Color (reload to test) -->
(video: name color: #FF0000 preset: gif)

WTF are these psyĀ­chodelic videosĀ šŸ‘¾

All videos above are creĀ­ated by aĀ GenĀ­erĀ­aĀ­tive AdverĀ­sarĀ­ial NetĀ­work which Iā€™ve trained on images of Aurora BoreĀ­alis. If you are interĀ­ested in the whole process or just want to see more of these subĀ­scribe to my newsletĀ­ter or follow me on TwitĀ­ter as IĀ promise to āœļø an artiĀ­cle in the very near future.

  1. <p>Please note that Iā€™ve wrapped all videos inside BasĀ­tĀ­ian AllĀ­geiers <a href=Ā»https://github.com/getkirby-plugins/columns-pluginĀ«>columns-tag</a> for aĀ better overview.&#160;<a href=Ā«#fnref1:1Ā« rev=Ā»footnoteĀ« class=Ā»footnote-backrefĀ«>&#8617;</a></p>