A little while back we discussed how to make quick example GIFs particularly for SaaS software features here. However, there is a bit more detail needed particularly when a still image, animated image, or video is the best option.
Most importantly, MP4s are the most bandwidth to quality effective but won’t always play automatically. (More below) On mobile, MP4s do play and they can be small enough, when compressed to around 3-4MB or smaller, to work even if downloaded on a cellular connection. But videos don’t always autoplay and especially on older iOS devices the video will take over the whole screen when played. Fortunately, MP4s have an image fallback that can be put right into the video code, example below.
<video poster="JPG or GIF" controls autoplay="autoplay" loop="loop" muted="muted" width="1920" height="1080">
<source src=“Primary Video (should be MP4)“ type="video/mp4" />
<source src="Primary Video (should be WebM)” type="video/webm" />
Even further, an animated GIF can be the fallback image for these videos so a user can see the motion even if their browser doesn’t playback the video.
MP4s do playback on mobile now. Previously the videos wouldn’t autoplay but now the smallest video, if marked with autoplay=“autoplay,” will show first so if you have multiple views in a post or list of posts make sure the top one is well compressed and marked properly.
HubSpot’s video embed is good but needs a little customizing to get right. Looking a bit of source code from the HubSpot editor, just below, the code is good but is missing the autoplay, poster, and multiple sources. This is why Wistia or, Vimeo, Youtube are great options as they do many of these details automatically and we’ll be back with a further post looking at the different options so stay tuned!