How to add a product video to your landing page (autoplay, size, placement)
A product video near the top of a landing page shows visitors what you do before they read a word. Getting it to autoplay everywhere without slowing the page down takes a few specific choices, which are easy once you know the browser rules.
Pick the pattern
| Pattern | Good for |
|---|---|
| Muted autoplay loop in the hero | A 15 to 30-second motion video that shows the product at a glance. No sound, no controls, plays on its own. |
| Poster with a play button | A 60-second to two-minute demo with narration, where sound matters and the visitor chooses to watch. |
| Both | The loop up top, and the narrated demo further down the page. |
The autoplay rules
Chrome's policy is short: "Muted autoplay is always allowed", while autoplay with sound needs things like a prior interaction with the site (Chrome for Developers). MDN describes the same rule across browsers and notes that Safari also needs the playsinline attribute for autoplay (MDN Web Docs). So a hero loop must be muted and playsinline, and a video with sound should wait for a click. Chrome's guidance also warns not to assume a video will play, and not to show a pause button when it isn't playing (Chrome for Developers).
The HTML
<video src="/product.mp4" poster="/product.jpg"
autoplay muted loop playsinline preload="metadata"></video>The poster image shows instantly while the video loads, and preload="metadata" keeps the browser from downloading the whole file before it's needed. It's the same markup this page uses for the video in the side card.
Keep it light
- Use video, not a GIF. In web.dev's example, a 3.7 MB GIF became a 551 KB MP4 and a 341 KB WebM (web.dev).
- Drop the audio track from a muted loop and scale it to the size it's displayed at. With ffmpeg, something like
ffmpeg -i video.mp4 -an -vf scale=1280:-2 -c:v libx264 -crf 26 -preset slow -movflags +faststart hero.mp4usually gets a 30-second loop to a few megabytes. - Use a video host such as Wistia, Vimeo or YouTube for longer videos with sound, so you get adaptive streaming and controls for free.
Placement and length
- Keep the headline visible. The video should support the headline, not push it below the fold on a laptop.
- Size the frame to 16:9 and crop nothing important at mobile widths.
- Keep the loop short. Under a minute is where engagement is highest in Wistia's data (Wistia), and a loop shorter than 30 seconds rarely feels repetitive.
Getting the video
If you don't have one yet, Teasr makes a 1920 x 1080 MP4 from your landing page in about 10 minutes, from €19.50, in your brand and with your real screens. It comes with music, which you can strip for the muted loop with the command above. There's more on that in turning a landing page into a video.