1. Add your .mp4 video to the RapidWeaver Resources panel.
2. Go Inspector > Sidebar, add the video snippet below.
<video loop muted autoplay class="feature"><source src="%resource(my_video.mp4)%" type="video/mp4"></video>
• Highlight your code, go Format > Clear, then Format > Ignore.
• Change “my_video” to your video title (no spaces).
3. Go Inspector > Styles > Banner – Type, choose HTML or Embed Video.
In preview, your HTML5 video should now be playing!
4. Drop in a fall back image banner for iOS devices.
Why add a fallback image? Apple limits iOS video support to prevent people from blowing through their data plan. But with your added image, iOS users will still have something nice to look at.
2 responses to Banner – HTML5 Video
Thanks for the explicit instructions. I did get hung up with spaces in my video title that prevented functionality until I caught it.
Now however there is no audio with the video. Doers this web theme allow audio from the video to play?
Good question. The autoplay HTML5 video banner does not allow for audio, this is a modern browser limitation, imposed by all browsers. If you’re looking for a video banner that support audio, I’d refer you to the “Banner – Embed Video” tutorial. But with embed video, autoplay is not supported, visitors must click to play. Hope this answer helps.