Lazy Load Videos - Can JCE help?

#105480 Lazy Load Videos - Can JCE help?

Posted in ‘Editor’

This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Saturday, 28 November 2020 12:29 GMT

Friday, 02 October 2020 16:35 BST

sandstorm871

I've scanned over documentation and your forum, so apologies if this has been asked before??

I'm at the starting point, redesigning a Joomla membership site, which displays a lot of Vimeo video pages in a couple of pages - sometimes over 100 videos showing up.
In the existing site, these are displayed as iframes, which for 1 or 2 videos is OK, but beyond that its very slow due to the number of connections.

I'm exploring the idea of some form of lazy-load so that only a thumbnail is shown until the user clicks on a video, so was wandering whether anything like this can be integrated into JCE, when adding the URL to the video or if you had any other ideas to explore & test?

Thanks in advance,
Andy

Tuesday, 06 October 2020 19:22 BST

Ryan

Vimeo videos, like Youtube, are loaded and played in an iframe, and unlike the <video> tag, you can't set a poster image for an iframe. Vimeo also does not provide an option to display a "poster" or "thumbnail" image of the video before it plays.

Although there is a "loading" attribute - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-loading - that can be set on an iframe so that it only loads when the it is scrolled into view, this does not solve the problem of the click to play solution that you would like.

This would need to be done in the front-end when the page is rendered, using javascript, css and perhaps php code. There may be a plugin for this on the Joomla Extension Directory - https://extensions.joomla.org/instant-search/?jed_live%5Bquery%5D=vimeo

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Edited by Ryan on 2020-10-06 19:22 BST

Tuesday, 24 November 2020 14:36 GMT

sandstorm871

Thanks for your reply. I appreciate it, especially as my initial question wasn't really JCE specific :)
I did explore your idea but have decided to set these Vimeo videos up as individual articles, setting intro image with a thumbnail and then display the article thumbnails to the user via a module, therefore the iframe doesn't load until the user clicks on the video they want to view :)

However, I do now have a more JCE specific question that could help the website admins when adding more videos/articles.

If I use the video/media manager icon, I can add my Vimeo URL, which will set the video up with the parameters I set in the plugin parameters > Media Manager > Vimeo.

However, If I use the lazy method of directly adding the URL into the article, JCE figures its a Vimeo video but doesn't use the preset Vimeo settings from the plugin. So if I use the lazy method, I have to edit all the settings to show the video with a larger width and modify the player colour - Which isn't so lazy :)

Can this method of simply adding the URL to the article pull the Vimeo settings from the plugin?
Also, can the plugin have an additional parameter to allow the video to display responsive

Saturday, 28 November 2020 12:29 GMT

Ryan

If I use the video/media manager icon, I can add my Vimeo URL, which will set the video up with the parameters I set in the plugin parameters > Media Manager > Vimeo.

However, If I use the lazy method of directly adding the URL into the article, JCE figures its a Vimeo video but doesn't use the preset Vimeo settings from the plugin. So if I use the lazy method, I have to edit all the settings to show the video with a larger width and modify the player colour - Which isn't so lazy :)

Can this method of simply adding the URL to the article pull the Vimeo settings from the plugin?

The two systems aren't connected at the moment, as the parameter set for Youtube and Vimeo is currently only for the Media Manager dialog, and not the Quick Media insert. I am working on a way to fix this, while trying to avoid "options hell" - logically I would need to add parameters for all the other supported media types too (Facebook, Soundcloud, Spotify, etc.) - and this could lead to a long list of paramaters in the Media Manager.

Also, can the plugin have an additional parameter to allow the video to display responsive

Vimeo, Youtube etc. are embedded using iframes, and to make these responsive, additional markup, javascript and css is required. I have a Joomla plugin for that - https://github.com/widgetfactory/wf_responsive_widgets

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.