The video background template in the Standard Builder has a unique setup in order to implement the video background. This article will help clarify how to place a video in the background of that template as well as answer some common questions.
Using video backgrounds
There are a few requirements when using the video background template. Most importantly, the video you use for the background must be hosted by you, not simply a streaming service. Also, some browsers and mobile devices may block video backgrounds from playing, therefore, the template will also ask for a URL to a background image you'd like in place of a video in case this happens.
Background video URL requirements
- A valid URL to your video file.
- The video file must be in “.mp4” format.
- The video file must have “H.264, AAC” encoding.
- The video file must not be larger than 720p (1280 × 720) resolution.
- The video file must be as small as possible, to ensure faster load times.
- The video file must not be letter-boxed or contain any other framing.
Background Image URL
A valid URL to an image file for users who can’t play video.
- We recommend using an image file that matches the first frame of the video in its content and resolution.
Background Image URL (mobile)
A valid url to an image file for mobile devices. This file should be small for fast loading on mobile devices. (1024 × 768 px is the maximum size we recommend using.)
Step-by-step adding video background
- Open the editor for your page using the video background template and select Dynamic Options from the left-hand sidebar.
- Enter the URL where your video file is hosted, and the URLs where your desired background image is hosted (for those who are not able to load video backgrounds).
- Click Done, then make sure to Save your page at the top-right corner of the builder.
Frequently asked questions
I have uploaded my .mp4 video and my images to Amazon S3. Why does my landing page not show the video or the alternative background image, even if I'm using the URLs I get from Amazon S3?
The URLs from Amazon S3 may have invalid security credentials. If your landing page is being viewed via a secure link (i.e., https://), all the resources on the page must also be from a secure environment or they will be blocked by the browser's security settings. If your link begins with http://, try using the same link with https:// to see if it is working properly.
How do I know if my video has the “H.264, AAC” encoding? And if it doesn’t, what do I need to do?
Most video editors will be able to provide this information. In addition, most video editors will allow you to encode your video using a specific codec, and you can select “H.264, AAC” when creating the video.
How do I know if my video is letter-boxed or contains any other framing?
Framing is visually apparent. If there are black areas visible on the sides of the video, with a center rectangular area playing the video, the video is letter-boxed. This is important because you will want your video content to 'fill up' the entire background area in your landing page. If you use a video that is letter-boxed when creating your landing page with the video background template, you will see the black spaces on either side of your video and your video will only play in the center rectangular area.
Will the Video Background Page also play audio?
No, it's only possible to play video in the background using this template.
Why do I receive an XML error code from Amazon S3?
If you receive an XML error message, it's likely that you have not made your Amazon bucket available for public viewing. For more information, please read Amazon's article on Permissions Required for Website Access.
Need more help?
You can always get in touch with our support team—just click Support in your Leadpages navigation menu, or submit a ticket ↗