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
From 09:00 To 17:00 Europe/London (BST)

Please post your question in the Forum and we will get back to you as soon as we can.

  Friday, 23 July 2021
  10 Replies
  1K Visits
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
more than a month ago
·
#108353
Youtube videos, which are embedded using iframes, do not have any option to add a "poster" image, such as with the standard <video> tag. There are some workarounds, but this requires additional front-end javascript and css.

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

more than a month ago
·
#108356
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.
more than a month ago
·
#108357
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)

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

more than a month ago
·
#108358
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
more than a month ago
·
#108431
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>

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

more than a month ago
·
#108512
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: https://dev.meerstetter.ch/customer-center/compendium/32-tec-peltier-element-design-guide > Thermoelectric Cooling Video

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!
more than a month ago
·
#108523
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.

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

more than a month ago
·
#108526
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!
more than a month ago
·
#108527
Did you add anything to the iframe other than the data-poster attribute?

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

more than a month ago
·
#108529
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 ...]] 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!
  • Page :
  • 1
There are no replies made for this post yet.
Be one of the first to reply to this post!