Step by step creating a video login page

Hi everyone,

What you need ?

Access to filesystem (ssh, ftp etc to upload some files)
Admin access to erpnext

/Sources (full codes here)
demosthenes.info/assets/images/polina.jpg
demosthenes.info/assets/videos/polina.webm
demosthenes.info/assets/videos/polina.mp4

Access as admin and go to website / setup / website settings

Set your home page as login so anyone visit your page will directly to access to login page (this is not suitable for companies who uses other erpnext facilities)

We will use video background. It is better to upload the videos to your system. (it will be faster and wont be removed in future) please be sure that where you upload the files can be accessed by erpnext.

Go to website / Setup / Website settings and find “more information” we will paste there this code

> <video autoplay loop poster="/assets/js/bck/polina.jpg" id="bgvid">
>     <source src="/assets/js/bck/polina.webm" type="video/webm">
>     <source src="/assets/js/bck/polina.mp4" type="video/mp4">
> </video>
> <style>
> video#bgvid { 
>     position: fixed;
>     top: 50%;
>     left: 50%;
>     min-width: 100%;
>     min-height: 100%;
>     width: auto;
>     height: auto;
>     z-index: -100;
>     -webkit-transform: translateX(-50%) translateY(-50%);
>     transform: translateX(-50%) translateY(-50%);
>     background: url(/assets/js/bck/polina.jpg) no-repeat;
>     background-size: cover; 
> }
> </style>

Just double check your files cause your video may not be under /assets/js/bck/
Also check that there is a reference to jpg file at inline css

I choose custom website theme (default was standard)

I want clearly nothing so it will look minimal.

Navbar is a useful thing but if you would like to make it transparent then you need to access /frappe-bench/sites/assets/frappe/css/bootsrap.css

find navbar-default and remove background color

Enjoy !

10 Likes

Great article!
Looking forward to see new website themes on the top of Frappe framework!

Thanks for sharing!
Sambhaji

@ferohers thanks for sharing!

Do you maintain a blog? Or maybe I can post this on the Frappe Blog.

Surely you can share. All things I used were open source. All I did was mixing them together.

I also managed to have youtube video backgrounds via ytpplayer (GitHub - pupunzi/jquery.mb.YTPlayer: use a custom yutube player for a video as background on jQuery framework)

However, this is an erp project and most of the time companies block youtube and other video websites due their company policies.

Hi @ferohers

In my case, i have to set only background image and video is not required. I have done the changes as you suggested but image not reflecting fully.
Please find in attached screen shot. any changes required?

Thanks
Raghu.

also how to remove the bottom get updates and top bar brand name, ?

You can remove the Get Updates by Disabling Footer Signup under Website Settings>Footer

Hello @raghu561 Could you tell me how to add image as a background for login page?

Thanks in advance!