Using a short looping video as the background of a webpage is a popular way to create an immersive experience today. We're going to take a step back from the often deep, technical, API applications and show you exactly how to build an visualizer which will help engage your audience and tell your story.
The outcome of this visualizer will be a looping background .mp4 video with overlayed text and title, plus a button at the bottom of the text.
Creating Content
In order to have your video and text show as the background, you will need to add text and mp4 video link to a content item. Add content by clicking content icon on the persona bar >> content tab >> create content button >> Home Banner.
Add content that will fill the text box on top of the video background of your choice. Name your content, in this example, Hero. You will refer to this content later when you apply the visualizer module on the page. Enter all fields in order to save.
Adding a Visualizer
To add the video background with floating text, clear the page of any modules. Then put the page into edit mode by clicking on the lower-left pencil. You will see several "content panes" appear on the page. Select the 3D box inside the top content pane to add a new module. Then select Visualizer from the recommended modules.
Choose the following visualizer options:
- Visualizer Type: Content Item
- Content Type: Home Banner
- Visualizer: Homepage Banner Video
- Content Item: Hero
Published
