Fix of the week #1 – Safari auto-play issue

#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.



Get the knowledge & best insights to your inbox

* Our newsletter, delivered once a month, covers the most talked about articles shaping web maintenance.

Thanks for your submission

We will contact you soon

Leave a Reply

Your email address will not be published. Required fields are marked *

4+ years experience in working with global and local partners from the web development industry. He combines strong communication and project management skill-set that helps him develop new opportunities and turn them into long-lasting relationships. Outside front-end and CMS landscape, he writes about film music and performs in improv theatre.

See other articles of Tomasz Ludward