You are here: Blog » Tutorials » How to use a video as your background in Hide My Site

How to use a video as your background in Hide My Site

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, and then add the following code to the template file page, just before the closing </style> tag:

And add the following just after the opening <body> tag:

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.



The step headers (Step 1, Step 2, etc...) and dividers on this post were proudly made with Visual Artist
This entry was posted in Tutorials and tagged by .

Author: justin saad

Justin Saad is first and foremost a husband and a father of four. He is also a web developer and designer who has been making websites for over twenty years. His company is called The Motech Network and his website is In addition to building websites, Justin makes WordPress plugins and likes writing tutorials to help others learn about various aspects of web development.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">