Press "Enter" to skip to content

Video as background in K2 Smartforms

0

I was always thinking about how I can make the forms in K2 even nicer, than they are. And what if we can add a context video to certain standard applications? What if your Leave Request Approval application looks like the one below:

Video as background

And now a bit of information, how to achieve that. Please, read this post if you have never added JS/CSS onto SmartForms: How to add JavaScript on K2 Smartforms.

You need to add the following JS and CSS onto the Smartform. The best approach is to create a view and reuse it on every form, where you need to add this video-background.

The script simply adds the following html into the Smartform DOM, which plays video in K2:

<div id="k2-background-video" class="bg-video">
    <video class="bg-video__content" autoplay="" muted="" loop="">
        <source src="https://github.com/dudelis/K2Devs/raw/master/k2-ui-features/k2-video-background/video.mp4" type="video/mp4">
        <source src="https://github.com/dudelis/K2Devs/raw/master/k2-ui-features/k2-video-background/video.webm" type="video/webm">
            Your browser is not supported
    </video>
</div>

As you see, in the source tags I specify path to urls, where the browser can get those videos. I am using both mp4 and webm formats, cause different browsers might be able to play different formats. And if the browser is too old to play video, then it will be written ‘Your browser is not supported’.

So feel free to bring some nice stuff inside your forms. Using video as background in K2 was also tested in K2Cloud. If any questions, please, let me know!

You can find all my K2 UI Features in this repo on GitHub: K2Devs.

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × three =