How to Add an Autoplay Video to a Page Banner

How to Add an Autoplay Video to a Page Banner

You can enhance your website's homepage by adding an auto-playing video to the banner slider. This feature is ideal for short, engaging clips that play on a continuous loop.

Important Considerations Before You Begin

  • Performance Impact: Autoplaying video can increase your website's load time, which may affect the user experience and search engine ranking. We recommend using this feature only with short, optimized video files.

  • User Experience: Autoplay is best for ambient, silent-looping videos. For longer content with audio, consider the lightbox option to avoid disrupting users.


Step-by-Step Instructions

Follow these steps to enable autoplay for a video in your homepage banner.

  1. Log in to your Vacation Labs admin dashboard.

  2. Navigate to the Website section from the main menu.

  3. Within the Website section, click on Pages.

  4. On the Pages and templates screen, locate and select the page where you want to add the video (e.g., HomepageAbout UsContact Us). This will open the page editor.



  5. In the editor, find and click on the section labeled Banner Slides. This is where you manage all content appearing in your pages banner.

  6. Inside the Banner Slide settings, look for a button called Additional Options. Click on it to reveal more configuration choices.

  7. Among the additional options, configure your video settings:

    1. Add a YouTube Video Link: In the designated field labeled "YouTube Video URL", paste the full URL of the YouTube video you want to play on the homepage.

    2. Choose a Playback Mode: You will find radio buttons to select how the video behaves.

      • To enable autoplay: Select the option labeled Autoplay video in banner, on repeat. This is recommended for short videos intended to play in a continuous loop without user interaction.

      • To disable autoplay: Select the option labeled Play Video in a light-box, when the play button is clicked. This user-triggered mode is better for longer videos and will not autoplay, preserving your site's performance.

  8. After configuring your settings, click Done to close the Additional Options panel.

  9. To apply all your changes to the live website, you must click the Save button at the top or bottom of the page editor.

Idea
Pro Tip: We recommend using a short, dedicated video rather than a long livestream or recording. A shorter, faster-loading video provides a better user experience. Choosing the lightbox option is a good compromise for showcasing longer content without impacting initial page load.




    • Related Articles

    • Adding sliders to the homepage banner

      Overview Vacation Labs lets you add multiple banner slides to your website (Homepage, Static Page, etc.) so you can showcase products in the first fold of the page. You can display different types of sliders, such as: Tour Slide – Shows tour details ...
    • How to add a new section on a page?

      Sections are the fundamental building blocks of your pages. Use them to add pre-designed content blocks like feature lists, testimonial cards, or product collections to customize your page's layout and content. Steps to Add a New Section Navigate to ...
    • Add a script/code to trigger on a specifc page

      The Advanced Settings of the website allow you to add a script/code that can be triggered on a specific page. For example a tracking script that must be triggered on any one tour page because its being promoted or you are running ads for it. You can ...
    • Add or change photos on a tour

      Overview While you can upload any number of images, we recommend limiting each product to 8–10 photos for the best user experience. One image must be selected as the banner image, so make sure it meets the minimum dimension requirements. To learn ...
    • Banner images and focus points

      Overview The "banner" image that you pick for a tour, collection, or static page, is shown at a number of places in a variety of sizes, aspect ratios, and orientations. For example: On the desktop, as a full sized "horizontal" banner image (what is ...