How to add background video?

Hi,

Unfortunately, it is impossible to apply a background video to the whole page. As an alternative, you can add a background video for a Block. Just click on a Block, and select the Video option in the Background settings.

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

April 24, 2022

Re: Add a Video Background for any website using your own Video - Suggestion and Sample Working Code You can use that allows you to use your own video, instead of using a third party link to a video like YouTube. You can also use a third party link as an alternative. But this is the best method to use when you're hosting your own video without using any third party. It is also much more reliable.

Hi there!

Many people want to know how to add Video Backgrounds, but there is very little info on how to do it correctly for universal compatibility with most commonly used devices.

Here is my suggestion when adding a video background to your website. Also note, I have tested this method and it works perfectly fine on all device platforms. Just remember that you need to have a dedicated section (block) as Paul said. You can't use it over an existing section or over the entire site as it may cause a conflict with your css / stylesheet.

You can use this code method when using your own Video Background on your home page or any page on your website to insure device and OS compatibility - such as windows, mac, android and iOS, Linux - mobile phones, tablets, laptops and desktop computers.

The best recommended method via HTML code to add to your Home / Index.html page to use a your video background is very simple.

Just to be clear, use a dedicated section (block) not the whole site or anywhere on your site. So adding a new block to your existing site works fine as Nicepage mentioned, or you can simply edit the home page main header of your existing block. Video backgrounds can be used as the feature main page of your website or on any page you create for your site.

You may need to modify the code on your page block where you are adding your video background section, especially if the default site code generated by Nicepage doesn't support universal devices, specifically for Mac OS / iOS phones and tablet devices, and that can be frustrating.

So I hope this recommended setting and method helps anyone who is looking to add a Video Background using their own video that is universally compatible with all devices and the most commonly used OS, such as Windows, Mac / iOS and Android / Linux.

SAMPLE CODE:
Here is the sample code for reference that works perfectly when adding a Video Background to your home page using your own video, which you would upload to your website hosting server. Also, create a video-intro folder for you to put the video you want to use as the background. Also, make sure your video background settings are full screen enabled.

****SEE ATTACHED SCREENSHOT FOR REFERENCE****

Please note: If you want to add text to the home page on top of the video background you can. It needs to be within the same section as the video background just add an overlay. The Nicepage editor should have the ability to add text on the new block you created for your video background. It's fairly simple.

You can also use a third party video link like Youtube or Vimeo if you don't want to use your own video, and that can also be done as Nicepage shows in this support/questions post. I have not tried this method using Nicepage, but in my experience using third party links usually has compatibility issues with Mac OS and iOS devices, which is why this recommended method is the best way to insure complete compatibility, which we tested on all platforms.

We hope this helps anyone who needs this info. Happy weekend!

Cheers,
IEG Wks NYC
J

Follow up on adding Video Background to any website:

PS Note:

We use Nicepage and similar platforms for Mockup Designs on website projects, but the final version of all website designs and works we do are completed using Adobe Dreamweaver CC, Visual Studio Code and Pinegrow, which are all great Apps to use to polish up and finalizing new website creations. It is also a good idea to test your website on all Browsers and OS platforms to insure compatibility. We also highly recommend Cloudflare, which is a great add-on for any site, and it cost zero to use for your website, unless you want any extra features. Hope this added info helps. :-)

Cheers!
IEG Wks NYC
J