Fullscreen Hero Background Video on iOS devices

Pushing our humble landing page to a new frontier.

Blair Anderson
Nov 17, 2017 · 3 min read
https://www.andersonassociates.net/landing/agency-mod-fsv/— visit on your iphone/android for similar experience

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/

  1. Optimize your videos! — This is the script I used
  2. Get your videos on the page — with secret iOS sauce
  3. 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 💥

  1. 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!
  2. Use ffmpeg to compressMy 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">
  {% 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.

Blair Anderson

Written by

Amazon Manufacturer’s Representative @ https://www.AndersonAssociates.net/