TextFormatterLiteVideoEmbed

[millipedia]

As requested by @fuzenco (quite a while ago... sorry for being slow), I'm just creating a separate thread for our TextFormatterLiteVideoEmbed module rather than hijacking the Lite YouTube Embed Module thread.

TextFormatterLiteVideoEmbed is a text formatter that replaces YouTube and Vimeo urls in text and textarea fields with custom web components that only load the video iframe when they've been interacted with. This is a million (approximately) times faster than loading the video when the page loads, especially if you have multiple videos on a page. You can check Paul Irish's original YouTube version to see what it's all about.

There are config options to set the button colours for the components, and one day I'll get round to adding all the other parameters we ought to have. I've used it on several live sites at the moment and is our go-to module for embedding videos now so hopefully will keep adding to it but I'm happy to take requests if anyone needs anything specific adding.

It was originally based on the TextformatterLiteYouTubeEmbed module so props to @jacmaesfor creating that.

The code is available on Github at https://github.com/millipedia/TextformatterLiteVideoEmbed and I'll add it to the modules repository once I've tidied up the code (it's getting there slowly).

 

[Fuzen]

@millipedia thank you ?? 

[bernhard]

Sounds great. How does the placeholder look like? Or how do we define it? Do you have any helpful screenshots? ? 

What about GDPR? How would that work with this module? Or is that what you mean by "only load if interacted with"?

[millipedia]

On 7/22/2023 at 4:42 PM, bernhard said:

Sounds great. How does the placeholder look like? Or how do we define it? Do you have any helpful screenshots? ? 

What about GDPR? How would that work with this module? Or is that what you mean by "only load if interacted with"?

The placeholder background images are pulled from YouTube / Vimeo, so whatever thumnail you set there will be what gets shown. Then a pretend play button that gets added which defaults to the Vimeo blue / YT red buttons:

When you click the button the placholder is replaced with the relevant iframed video.

The module has a config option that will let you change the colour of that button.

It's not too much effort to style the play button if you want to make it bespoke (as we did for https://osborne.coop/ ).

Now - GDPR is a good question. All we're doing when the page loads is pulling an image in. Neither Privacy Badger nor uBlock are complaining about anything when we load an image from YouTube, but Privacy Badger does flag a cookie from Vimeo (uBlock doesn't mind). We use the no-cookie domain for YouTube as well of course.

It doesn't look as if lite-youtube or lite-vimeo offer the option to use a local placeholder image but it's probably doable. Not enrirely sure how we'd configure it in a TextFormatter tho.