Fullscreen Hero Background Video on iOS devices
Pushing our humble landing page to a new frontier.
Recently I wanted to give our landing page a little upgrade. Google Analytics showed 90% of our visitors are on desktop and the other few remaining people are on iphones!
I decided to try out adding a fancy background video.
The majority of posts about this will show you how to hide the video on mobile(because iOS had a problem with videos), but I’ll show you below how to get that working as well.
TLDR; I paid a drone operator to fly over some random shipping vessels in Europe and give me the videos!
LIVE DEMO: https://www.andersonassociates.net/landing/agency-mod-fsv/
Here are the basic steps for a video slideshow. I have gone into further explanation for each section below the demo GIF.
- Optimize your videos! — This is the script I used
- Get your videos on the page — with secret iOS sauce
- Add a little Javascript to handle the mini “playlist” — The Code
Optimizing Your Videos for Web
You definitely need to optimize your videos for web. I have 5 videos transitioning on my landing page, each raw file was about 30 seconds long and well over 150MB!!!
Using these steps got myself some videos each below 2MB 💥
- Select the best 3–5 seconds of footage — Use quicktime or lossless-cut to cut up all the videos you want to show. Anything longer than 5 seconds will take more time to load and your website visitors will see an empty screen and be sad pandas!
- Use ffmpeg to compress — My script is on GitHub. It scales videos down to 1920x1080 and uses the H.264 encoder with a Constant Rate Factor of 30 with a medium preset. You can squeeze more bytes out if you increase the CRF and slow down the preset.
Good Job.
Get the videos playing in the background
If you’re here to get background videos working on iOS, the trick is the new video attribute called playsinline which just needs to be added to your video source.
My HTML looks like this:
{% for video in site.static_files %}
{% if video.path contains 'img/videos' %}
<video muted playsinline>
<source src="{{ video.path }}" type="video/mp4">
</video>
{% endif %}
{% endfor %}Make sure you’ve added mutedand playsinline so they work on iOS devices — You can read more about playsinline here
If you’re still here then we’re not quite done because all those videos will be playing on your page! We only want one at a time!
Now we add Javascript to toggle through
spoiler alert I’m using jquery:
What does this do:
- This keeps track of current video playing
- Plays the first one
- Hides all the videos that are not playing
- Sets up a listener for the end of the current video and advances the playlist
- Fades in the newly activated video
Disclaimer: It would be stupid to put videos on your landing page if most of your users are mobile. I would not recommend this. huge majority of my visitors are desktop with fast internet. YOLO.
