Adding a Video Background in Hallo

Hallo allows you to add a self-hosted video to feature on your website.

Note: This does not work with videos hosted on platforms such as YouTube or Vimeo.

Adding a Self-Hosted Video Background

To add your own self-hosted video as the background, follow these instructions:

  1. Select the video from your PC that you want to showcase.
  2. Copy the video to the assets/videos folder.
    • If you’re testing the template locally on your PC, then simply copy the video.
    • If you’ve already uploaded the template to your host’s server, then FTP the video into the assets/videos folder.
  3. Open the index-video.html file in a code editor and look for video-side section.
  4. Change the file name to the file name of your video.
    • You will need to change this in the <video class=”video” muted autoplay loop src=”assets/videos/background.mp4″></video> section. For more information, refer to the code example.
  5. Save the file and view the updates on your PC.
    • If you’re testing locally, simply drag the index-video.html file into an empty tab of your favorite internet browser.
    • If you’ve already uploaded the template to your host’s server, then FTP the updated index-video.html file, and then view it in your browser.
    • Note: Remember to change the file name from index-video.html to index.html when your site is ready to go live.

Here is the code which you need to modify to link a new self-hosted video background for your site:

<div class="background-video-container">
    <video class="video" muted autoplay loop src="assets/videos/background.mp4"></video>
</div>