You can implement background video in the hero section of any page just like you can background images.
Background Video Guidelines
Below are the ideal specifications for your background video. Use cloudconvert.com to convert the video into the proper formats.
- One version in .mp4 format.
- One version in .webm format.
- Both versions saved with very short names (i.e. nm.mp4 and nm.webm) due to character constraints in the implementation of the video.
- Both versions must be under 10MB.
- Roughly, if not exactly, 1280 x 720.
Background Video Implementation
- Go to Theme → Files.
- Upload your .mp4 and .webm video files.
- Leaving this tab open, in a new tab go to the Settings → Featured content sliders of the page that will display the video.
- In the Label field, enter Video.
- Leaving this tab open, navigate to your other open tab containing the theme files.
- Right click the .mp4 video file and click Copy Link Address. If you do not see this option, right click the .mp4 video file and open it in a new tab. Then, copy the URL of this new tab. If you had to open this new tab, you can close it once you've copied the URL.
- Leaving the theme files tab open, return to your other tab.
- Paste the URL you copied into the Headline field.
- VERY IMPORTANT: Place a comma after this first URL.
- Leaving this tab open, navigate to the other open tab containing the theme files.
- Right click the .webm video file and click Copy Link Address. If you do not see this option, right click the .webm video file and open it in a new tab. Then, copy the URL of this new tab. If you had to open this new tab, you can close it once you've copied the URL.
- Return to the other tab.
- Paste the URL into the Headline field after the comma. Overall, your Headline field should now have the following format: mp4-video-url,webm-video-url
- Click Choose File to upload a background image that serves as a backup in case the video can’t load.
- Save.