Get Started
Dynamic Backgrounds
Dynamic Video

Dynamic Video

How to Create a Dynamic Video Background

Creating a dynamic video background is an awesome way to add a lot of life to your webpage. With the code you provided, you already have a video background in place, but we’re going to break it down and explain how you can dynamically change the video based on interactions from your Typebot.

Step 1: Basic Setup for the Video Background

You already have the basic structure set up with a <video> tag inside a container. Here’s what’s happening:

  1. Container: .video-container ensures that the video fills the entire screen.
  2. Video: The video tag is using properties like autoplay, loop, and muted, which are key for background videos since you want them to play automatically, loop forever, and without sound.

Here’s a breakdown of the important CSS:

.video-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video fills the screen without distortion */
}

Key Properties:

  • autoplay: Automatically starts the video.
  • loop: Ensures the video loops continuously.
  • muted: Mutes the video sound, so it doesn’t disrupt the user experience.
  • object-fit: cover: Keeps the video aspect ratio while filling the screen.

Step 2: Dynamically Changing the Video

You want to switch the video dynamically based on user input in Typebot. You’ve already got a changeVideo() function in your JavaScript. Here’s how it works:

  1. Get the Video Element: You use document.getElementById('backgroundVideo') to grab the <video> element.
  2. Change the Video Source: When the user provides an answer, you change the src of the video using backgroundVideo.src = newVideoSrc;.
  3. Play the New Video: After the source changes, backgroundVideo.play() ensures the new video starts immediately.

Here’s the JavaScript function you are using: 

function changeVideo(newVideoSrc) {
  const backgroundVideo = document.getElementById('backgroundVideo');
  backgroundVideo.src = newVideoSrc;
  backgroundVideo.play(); // Ensure the video starts playing
}

What this does:

  • backgroundVideo.src = newVideoSrc;: This changes the video file to whatever new URL you pass to the function.
  • backgroundVideo.play();: This ensures the video starts playing after the source change.

Step 3: Triggering Video Changes Based on Typebot Responses

You want the video to change dynamically depending on user responses in Typebot. This is handled inside the onAnswer event listener. For example, when a user says the experience was “worse,” a new video is played:

Typebot.initPopup({
  // ... (other Typebot settings)
  onAnswer: (answer) => {
    console.log('Answer received', answer.message, answer.blockId);

    if (answer.blockId === "clcrb4kx8000v3b6mudh73ho6" && answer.message.includes("worse")) {
      changeVideo("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4");
    }

    if (answer.blockId === "clcrb4kx8000v3b6mudh73ho6" && answer.message.includes("better")) {
      changeVideo("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4");
    }

    if (answer.blockId === "clcrb4kx8000v3b6mudh73ho6" && answer.message.includes("same")) {
      changeVideo("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4");
    }
  },
  onEnd: () => {
    console.log('Bot ended.')
    changeVideo("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4");
  },
});

How it works:

  • Conditional Statements: The video changes when specific conditions are met. For example:

    • If the user says “worse,” the video changes to “ForBiggerEscapes.mp4”.
    • If the user says “better,” the video changes to “ElephantsDream.mp4”.
    • If the user says “same,” the video changes to “ForBiggerBlazes.mp4”.

  • Ending the Bot Session: When the bot interaction ends, you can play a different video to indicate the end of the interaction.

Step 4: Testing the Video Background

Once you’ve set everything up:

  1. Load the page: When the page loads, the default video will play.
  2. Interact with Typebot: Based on the user’s input, the background video will change accordingly.
  3. Verify Video Changes: Make sure the video changes and plays automatically based on the user’s responses.

These enhancements can be added to your existing code to make the background effect even more dynamic and realistic.

Additional Resources

Last updated on
Ken Burns Effect