Divi Theme: How to Auto-Play Videos Only When Scrolled Into View

[@System22]

Check out our playlist page for more videos on this: kzbin.infoplaylists Don't forget to drop any questions below, I will do my best to answer or make a video demo for you! Sub: kzbin.info/door/Yeyetu9B2QYrHAjJ5umN1Q

[@Stephen_R_Smith_365tomorrows]

This is great! If you had multiple videos on a single page, given that CSS IDs must be unique, is it possible to pass an array of IDs to the code so we don't have to copy the JS multiple times on the page in separate code blocks with different IDs?

[@System22]

Glad to help @Stephen_R_Smith_365tomorrows - You would need a different function name for each also! - Check out our Simple CSS playlist for more videos on this: kzbin.info/aero/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL - Please like, share and subscribe if you have not done so already - Thanks!

[@kimskaggs2525]

Great tutorial but when I tried it out, the video doesn't auto play when scrolled into view. I've tried it in different browsers with the same result. I don't see any errors in the console.

[@System22]

Not sure why that is @kimskaggs2525 - Check out our Simple CSS playlist for more videos on this: kzbin.info/aero/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL - Please like, share and subscribe if you have not done so already - Thanks!

[@nounix]

Hi! This is all too complicated for me to understand :P:P Can you please reply here with the CSS code I have two paste onto "custom CSS" field so that the video/s (that I have uploaded to my WordPress library) will just play automatically and in a perpetual loop, when the video module comes into view. Maybe when 50% of it comes into view? (I'm not talking about KZbin videos or anything else: Just videos uploaded to my WordPress library) ;) And apart from copying and pasting this CSS code, is there anything else I should toggle on or off - or anything else I have to write anywhere else, eg. in a different field - so this can work? If I understood correctly I go to Divi -> Theme Options -> Integration -> paste the CSS code to the "Add code to the < body >" field. Correct? And whatever the CSS is - no matter how long - I have to copy paste the ENTIRE thing there only ONCCE. Right? Also, I understand that if I use the CSS at the above location this will apply to every single video on my side. I don't want that. I want to apply this functionality only to some videos in my side. They will of course all the videos uploaded to my WordPress library. Is there a way to apply this CSS only on or two specific video modules?

[@System22]

Follow the video step by step @nounix - The code is JS not CSS, you can paste it into a Divi Code module on the page if you just want it to work on that specific page. ( No need to use the intigrations tab for this method ). Check out our Simple CSS playlist for more videos on this: kzbin.info/aero/PLqabIl8dx2woI_19vOSGFBWZEevx3oSuL - Please like, share and subscribe if you have not done so already - Thanks!

[@nounix]

@@System22 Thank you! Thanks for your reply!! I had started watching the video and I really got confused - maybe you have it in a step-by-step tutorial written somewhere, and/or the code written somewhere so I can copy-paste it?? *At one point he started talking about doing this for a KZbin video and not a video stored in a WordPress library - like in my case - Will this still be applicable to me? BTW of course have subscribed! :)

[@nounix]

@@System22 Hi! Any way you could reply to my 2 questions please? Thanxxx!

[@Edddgdxhwfdghhghg]

Cool🎉

[@System22]

Great!