#STEP 1 – The Background
Last week our team was requested to inspect a slowish hero background video on a client’s website. In fact, it wasn’t the video itself that was running slowly but the entire loading process that preceded its start.
It goes without saying that in such cases the sequence of elements loaded onto a site plays a crucial role.
The video, as it turned out, was embedded in a slideshow and was the third element to load, after website and slider libraries. We took a drastic decision to replace the entire slider with a YouTube iframe. That was meant to be a clever move – we skipped the resources reserved for the slider and got straight to the point by using a third party video.
Although everything seemed to work on our end, a new problem emerged on the client’s Safari browser, and only there. It reacted weirdly to the header media update and couldn’t, for God knows what reason, auto-run the video. Needless to say, the issue didn’t occur across other browsers. Due to this fact, we had to narrow down the troubleshooting to Safari.
#STEP 2 – The Tech
Now let’s look back on the latest Safari updates. The 11th version of a master Mac browser offers a new auto-play policy which determines if the media components with sound should be played by default. For most websites, it’s exactly what Safari does – it turns off audio for individual media elements. That should send a warning sign to advertisers and help users work away from distractions. But what if the video belongs to the header of a website, and has been purposefully set to work under no external software regulations?
#STEP 3 – The Fix
That was the case with our issue, and there were two ways to bypass it, both available from the level of the browser’s settings. As a website user, to fix it quickly, go to Safari > Settings for This Website and pick the option that suits the situation best – we went with Allow All Auto-Play. The other way is to visit Websites within the Preferences window, go to the Auto-Play section, and adjust auto-play settings for the selected website.
We realized that this could work just for one computer so to secure the video itself we added one extra parameter to the YouTube video address, namely ‘mute’.
#STEP 4 – The Clap!
That did the trick for the client. The video is now served through the streaming platform, and Safari lets the media through with video and sound.