Lazy Load video with autoplay

https://stackoverflow.com/questions/65218853/automatically-play-pause-video-if-they-are-in-the-viewport-not-in-the-viewpo

you can play and pause it when scrolled into view

Thank you! I’m not that of an expert, what should I do with the snippets? should I copy all 3 of them and place in each product page and edit the addresses?
Is there an easy way to do that?

It really depends on how your videos are embedded. If they are a straight <video> tag the code will work. If they are in an iframe, that code won’t work. Do you have a link to the page with the video?

Yes this is a product page example (a lot of them has videos like those)

https://www.barillio-barware.com/product/complete-bar-tool-set/


Thanks!!

Are you referring to the embedded Vimeo video, the first one or the others like in the “Create Any Cocktail That…” section? Those are two different things.

I mean the second ones not the embedded

https://github.com/tugbucket/lazy-load-videos

try that. It has one shortcode:
[lazyloadvideo pauseonscroll="yes"]

the parameters are yes and no

By default it’s set to yes. The videos should start playing when you scroll into view and pause when scrolling out of view. If set to no, the videos start playing when scrolled into view and do not pause after scrolling out of view.

Should note, the shortcode is 1 per page not per video.

• This reply was modified 1 year, 1 month ago by tugbucket.

Sorry for the noob question but I used the “shortcode” Elementor drag and drop and copy pasted

[lazyloadvideo pauseonscroll="yes"]

Also tried to put it on the product edit page itself (under “shortcode” tab on the OceanWP settings).

Nothing happened.

Is that the right way to do it?

• This reply was modified 1 year, 1 month ago by yarintosh.
• This reply was modified 1 year, 1 month ago by yarintosh.

Did you install and activate the plugin? What page are you trying it on?

I’ve used the OceanWP (that’s the website theme) option on this page:

https://www.barillio-barware.com/product/rose-copper-cocktail-shaker-set

The code doesn’t exist on that page. I don’t know anything about OceanWp or that shortcode tab.

If the plugin is installed and activated, place the shortcode in your copy like right after the “Unlike similar products who…” paragraph.

• This reply was modified 1 year, 1 month ago by tugbucket.

Actually I do see the one from Oceanwp you’ll see the text on the top left part of the page, and also the shortcode drag & drop from Elementor right where you said (placed it now).

It shows as a text, meaning it has no impact

You have to install and activate the plugin in order for the shortcode to work.
https://github.com/tugbucket/lazy-load-videos

Oh I see, I think it’s working now thank you so much for all your help!!

One question though, since it’s Lazyloaded, why does the videos still loaded on the page even when not scrolled?

You can see on this test the m4v
https://gtmetrix.com/reports/www.barillio-barware.com/dn7WrW1t/

Because it’s not actually lazy loading them. It pauses them on load and then plays them when they scroll into view. Actually lazy loading them would take a lot more work and you’d have to change your HTML for everyone of your videos.