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 autoplay attribute has a catch: videos which start playing automatically (without any user interaction and without any JavaScript workarounds) cannot contain sound. This can be easily forced by including a muted attribute on the video element, which was the solution here. It would be simple to add a button to the video player to allow the site visitor to turn sound on, which would use JavaScript to toggle 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.
A simple JavaScript function, added by a colleague, allows a “URL trigger” link to be shared via (e.g.) email, which opens the video overlay automatically.
Leave a Reply