Making a somewhat responsive video playing custom tulip widget

The current video widget is fairly limited (I’m guessing its on the roadmap for improvement) mainly it can’t take variable input, but while we wait we can create a custom widget.

First off find a video playing example. After a fair bit of rifling around I came across this article and stole the code.

Modifying it for my needs, I added a bit of code to make it play with a click on the video (clicking on small icons is annoying)

I couldn’t get full screen to work, I think because of how the widget works.

Add the bit to allow a prop (so you can use a variable to set the src)

Tada, the code lives here

And you get a video player that looks like this

5 Likes