Enhancing the Landing Page with a Promotional Video
Goal
To create a more engaging landing page experience by embedding a short, autoplaying promotional video.
Implementation
A dedicated video project was created using Remotion v4 to produce a 20-second promotional video. The video highlights key features and provides a call to action.
Video Production
The video was structured into five distinct scenes:
- Intro: A brief introduction to the application.
- Tagline Typewriter with Highlight: A dynamic presentation of the application's tagline.
- Theme Showcase with Live Screenshots: Displaying the visual themes with actual application screenshots.
- 3-Step CTA Flow: A clear and concise call-to-action sequence.
- Outro: A concluding scene reinforcing the application's brand.
Embedding the Video
The video was embedded into the landing page using the HTML5 <video> element with the following attributes:
autoplay: The video starts playing automatically when the page loads.muted: The video plays without sound to avoid disrupting the user's initial experience.loop: The video loops continuously.
<video autoplay muted loop width="1920" height="1080">
<source src="video/promo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
The video was placed between the hero section and the builders section on the welcome page to capture user attention without being too intrusive.
Benefits
- Increased Engagement: The video provides a more visually appealing and engaging introduction to the application.
- Improved User Experience: Autoplay and muted settings ensure the video doesn't disrupt the user's initial browsing experience.
- Concise Information Delivery: The 20-second video quickly conveys the application's key features and benefits.
Considerations
- Video Optimization: The video was optimized for web delivery with a resolution of 1920x1080 and a frame rate of 30fps.
- Accessibility: Ensure alternative text or transcripts are available for users who cannot view the video.