There are several ways to add videos to a website created with Hostinger Website Builder 👇
Adding YouTube or Vimeo Videos
Within the editor, expand the Add elements panel on the left. Select the video element, and drag and drop it anywhere on your website:
Click on the element to find more options (edit, duplicate, change visibility, delete, etc.):
Click on Edit video to find more settings:
General | Animation |
|
If the option Show video controls is disabled, Vimeo videos won't play on mobile devices. To play Vimeo videos on mobile devices, enable the options Show video controls or Autoplay 💡
Troubleshooting Unavailable YouTube Videos
If the YouTube video is unavailable, you're most likely using a shortened YouTube URL:
https://youtu.be/video-id
To fix it, change the beginning of the URL to this:
https://www.youtube-nocookie.com/embed/video-id
Adding Facebook Videos
You can easily embed any publicly shared Facebook video into your website.
1. Copy the URL of the selected Facebook video:
2. Open Facebook's Code Configurator and paste the link there. You can also specify the preferred width of the video in pixels. Once you do that, click Get Code:
3. Copy the IFrame code of the video:
4. Within your website editor, add an embed code element anywhere on your site and insert the code.
5. Update your website and check what it looks like online.
Adding Videos From a Local Device
To add a video from your computer, you first need to upload the video to any cloud-based file storage, e.g., Google Drive. This way, a special iFrame code of your file is created. To display the video on your website, you would need to paste the iframe code in the embed code element.
1. Upload your video to Google Drive or any other cloud file storage.
2. Get an iframe code for that video. If you use Google Drive, follow these instructions.
3. In a new tab, open your website's editor. Add an embed code element anywhere on your site, and insert the video iFrame code.
4. Update your website and check what it looks like online.
Adding Videos to a Section Background
Within the builder, click on the section you want to edit and select Edit section:
Choose image background settings:
Currently, the video background only supports video Pexels. To use your own video as a section background you may convert your video to .gif and upload the GIF as a section background image. More details here.