Images are fine as far as Hide My Site backgrounds go, but wouldn’t it be cool if you could use a video for your login page background? Well, now you can! This tutorial will show you how to go about doing precisely that. Note that you will have to be using Hide My Site premium in order to follow along.
Step 1. Prepare your video files
Find a video that you want to use. You should save it as both a .webm and a .mp4 file. Note – the video shouldn’t be larger than 5mb or else it might take too long for most of your users to load it.
You should also prepare a video preview image for users who have trouble accessing video.
Upload the two video files and the preview image via WordPress media uploader, and take note of the file URLS.
Step 2. Edit login page html/css
Refer to the section titled “How to override the login page template within your theme folder” on http://www.clevelandwebdeveloper.com/wordpress-plugins/hide-my-site/, and then add the following code to the template file page, just before the closing </style> tag:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#video-bg { position: fixed; right: 0; bottom: 0; width: auto; min-width: 100%; height: auto; min-height: 100%; z-index: -100; background: transparent no-repeat; background-size: cover; } |
And add the following just after the opening <body> tag:
|
1 2 3 4 5 6 |
<video autoplay loop muted poster="http://www.yoursite.com/path/to/vid-preview-image.jpg" id="video-bg"> <source src="http://www.yoursite.com/path/to/video.webm" type="video/webm"> <source src="http://www.yoursite.com/path/to/video.mp4" type="video/mp4"> </video> |
The URLs in the code above should match those you took note of at the end of step 1. Save the new template file.
Step 3. Enjoy your new background video
If all went well, you should now have a nice background video for your Hide My Site login page. Way to go!
Special Notes
- This works with modern browsers – It doesn’t work with IE8. Not sure about IE9.
- Video does not play on mobile (preview image shown instead)
- I am considering creating a new add-on that allows you to easily use background videos in Hide My Site without having to edit the HTML/CSS. If you would be interested in this, please let me know via the comments section or via the contact form. Your input is greatly appreciated.
Thanks for taking the time to follow this tutorial. Hope you find it helpful. Please let me know if you have any questions or other feedback in the comments.
Related Posts
- Hide My Site Multipass
- Hide My Site Custom Login Page Examples #2
- Hide My Site Custom Login Page Examples
- Hide My Site Bypass URL
- Hide My Site Redirect
- Hide My Site
- New feature added to Multipass – Clear All Logs
- What’s new in Hide My Site version 2.1
- Will Hide My Site be Gutenberg compatible?
- How to add a hyperlink to your Hide My Site login page
