A leading drone-based data company asked my employer to get a splash page for their new website online as fast as possible, and then extend it to a complete website within a short timescale. So I knuckled down and spent a day working from home to get the first part of the job done.
Part of the splash page is an autoplaying video, which is linked by a button to a complete “image film”, embedded from YouTube and appearing in an overlay. The background video had to start automatically and loop continually, and the layout demanded that it appear with no “branding” from an external video service like YouTube. This led me to use an HTML5
video element and an MP4 file sourced from the WordPress media library directly in the website.
The technique is pretty simple and support for the
video element is ubiquitous these days. However, the
muted attribute on the
muted attribute on and off.
Because the HTML5
video element doesn’t require the use of a browser plugin, the problems of yore when overlaying other elements don’t crop up any more, so it was easy to position the button above the lower section of the video, with which the visitor can open and watch the full image film. I tweaked the layout slightly throughout the range of breakpoints, from mobile to large desktop, to ensure that the button was appropriately spaced between the text – which is embedded in the video – and the edge of the video player.