Video play & pause on scroll

Sometime you might need to start a HTML5 video only when it reaches into the view while scrolling the page. It can be done easily in Kickpages with a bit of custom JavaScipt code.

First off, you will need to add a custom code block with the HTML5 video element hosting your video file. The code to add is below, just replace your video URL and add different styling if you would like:

<video id="video" muted="muted" playsinline="playsinline" data-loop="6" data-offset="-400" data-playing="false"><source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4"></video>
<input type="hidden" value="false">

Then you need to add a custom code snippet yo your header includes:

The code snippet to add can be found here: https://pastebin.com/eKFkm7Q5

There is nothing to be changed in the code but if you would like then you can tweak the ratios and play with the code. If you do not have the required JavaScript knowledge, then please contact us with what you would like to change and we can help you out.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Create a support ticket Create a support ticket