You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Offline

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

Please create a new Ticket and we will get back to you as soon as we can.

#108352 Replacing embed Youtube videos with facades

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 wdburgdorf on Monday, 16 August 2021 18:25 BST

Friday, 23 July 2021 05:17 BST

Dion
Hi,

Is there a way to replace embed Youtube videos with facades, which are essentially placeholders to speed up the loading of pages that contain many embedded videos?

Thank you,

Dion

Friday, 23 July 2021 11:07 BST

Ryan
Youtube videos, which are embedded using iframes, do not have any option to add a "poster" image, such as with the standard

Ryan Demmer

Lead Developer / CEO / CTO

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

Friday, 23 July 2021 14:17 BST

Dion
Hi Ryan,

I'm keen to try some workarounds as suggested, can you please provide details and examples on these workarounds to add a poster image for embed videos?

Thank you.

Dion.

Friday, 23 July 2021 15:09 BST

Ryan
I'm working on something this weekend, and addition to an existing plugin - https://github.com/widgetfactory/wf_responsive_widgets

I'll let you know when it's ready for testing (soon)

Ryan Demmer

Lead Developer / CEO / CTO

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

Saturday, 24 July 2021 01:19 BST

Dion
That's awesome Ryan!

Thank you for working on this (important) additional feature that will make embedded videos load faster, looking forward to testing this addition to add a poster image for embed videos to your Responsive Widgets plugin.

Thanks!

Dion

Monday, 02 August 2021 20:16 BST

Ryan
Please try Reponsive Widgets 1.0.17 - https://github.com/widgetfactory/wf_responsive_widgets/releases/tag/1.0.17 You will need to set a "poster" image for the iframe, using a data-poster attribute. The image can be on the server or external, eg: 

<iframe src="https://www.youtube.com/embed/xxDv_RTdLQo" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" data-poster="images/temptation.png" width="560" height="315" frameborder="0"></iframe>

Ryan Demmer

Lead Developer / CEO / CTO

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

Friday, 13 August 2021 14:09 BST

wdburgdorf
Hi Ryan,

This looks promising, but does not work for me. The class is added to my YouTube-iframe, but the only thing that happens is that the height is set to "auto" and the iframe will be much too low, overwriting the given height.
Adding a data-poster attribute has no effect, it is always just the usual embedded YouTube player.
See here, please: [hidden]

Any idea, what's wrong?

It would also be nice to have a choice (opt-in) of which elements are affected, as an alternative to the opt-out "wf-responsive-no-container".

Thank you!
Edited by wdburgdorf on 2023-11-16 08:40 GMT

Monday, 16 August 2021 10:04 BST

Ryan
You have some king of cookie blocking script on your site which hides the Youtube iframe, presumably until cookies are accepted. This may be causing the issue with the processing and display.

Ryan Demmer

Lead Developer / CEO / CTO

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

Monday, 16 August 2021 15:16 BST

wdburgdorf
Not sure you were on the right page there ... I did have a cookie script, but it wasn't active. I removed it now, the page still looks the same.
(There is copy of the site without the "dev". This one also shows the iframe even with no cookies accepted.)

Thanks!

Monday, 16 August 2021 16:28 BST

Ryan
Did you add anything to the iframe other than the data-poster attribute?

Ryan Demmer

Lead Developer / CEO / CTO

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

Monday, 16 August 2021 18:25 BST

wdburgdorf
No, I didn't. But I've got it now. While collecting evidence for you, I had the idea that it could be because of plugin order: I use Regular Labs Sourcerer to add iframes. So if Reponsive Widgets runs before Sourcerer, it will see [[iframe ...][iframe ...]] rather than <iframe ...>!
Therefore I pulled Reponsive Widgets way down to have it run just after Sourcerer, and now it's fine. Sorry about that, maybe it helps someone else.
Thank you!