Responsive autoplay videos: an easy solution for a perfect integration

Introduction

If your web pages display autoplay videos, their optimization is a make-it-or-break-it point for user experience. On top of the general front-end principles (avoid layout shifts, reduce the file size), there are also some specific challenges. This article gives an overview of the best practices related to the <video> element and shows an easy way to make autoplay videos lightweight and responsive.

What challenges make the integration of autoplay videos tricky?

Display optimal video size based on user context

Given the great variety of users’ devices, it’s advisable to specify several variants of the video with different sizes and aspect ratios. Unfortunately, browsers don’t support media queries on video source tags. So you can’t rely on them to load the appropriate version of a video. There is also no equivalent to the sizes attribute for <video> tags, leaving you without an easy and intuitive way to implement responsive videos.

Serve videos in the optimal codec/format

A video’s file size greatly depends on the codec used. The decoding method itself can impact the time it takes to render a video in the user’s browser. Today’s golden standard is to use the VP9 codec for Chrome, H265 for Safari, and H264 as a fallback.

But managing various format versions of the same video adds additional complexity to your entire digital asset management workflow. Plus, you’ll have to append your code to enable each browser to load the optimal version.

Improve the perceived performance and user experience

Even after the optimizations, video files stay heavy enough and take a noticeable time to load. This is especially a problem for mobile users.

In order to prevent user bounces in the first seconds, you need to improve the video element’s perceived performance. Generating and displaying a placeholder for the video helps create a more fluid visual experience. But again, this brings the tasks of creating and managing additional assets, and even more changes to your code.

What’s wrong with the traditional approach to the integration of responsive videos?

The careful integration of native HTML video elements into your web pages requires a significant amount of work. This tutorial example by Simon Hearne goes through the process of applying basic optimizations to a hero section video.

The example concerns an extremely simplistic web page with a loop muted video in the hero section. The author shows how the optimizations change the performance of the initial page.

The optimized page comes with two versions of the video: one for desktop users and the other for those on mobile devices. A simple JS script chooses the correct version based on the viewport width. We encourage you to read the full guide and follow the steps for a full understanding of the setup and initial performance issues.

To sum up, the following recommendations are implemented:

1. Set the <video> src attribute as soon as possible: This is to avoid loading both the desktop and mobile versions of the video on mobile devices and to reduce the delay between loading the JavaScript and mobile video. Plus, wrap it in a function that’s called whenever the browser window is resized.
2. Use CSS to allocate the correct space for the video: Before the video renders, the browser doesn’t know how much vertical space it will need. This step involves defining the size of the video element container in the CSS to avoid the browser moving fully-rendered elements around later in the loading process to make space.
3. Use the poster attribute for a fast-rendering first frame: This loads a light placeholder image in the video’s container while we’re waiting for the video itself to load. This improves the perceived performance for users and is vital as the video is over 11 MB!
4. Use responsive preloads to optimize poster image delivery: Pre-loading placeholders makes them appear earlier in the page loading process, further improving the perceived performance.

These optimizations were able to improve the render time for the video from six seconds to three on a 3G connection.

Let’s note the considerable workload necessary to obtain these performance gains even in the oversimplified setup of the sample page. The problems going this route in a full-scale project are apparent.

Firstly, every step requires some code changes. It might take hours to make these changes to all of the project’s templates with video content.

Secondly, it requires generating, storing, and managing several files for each video. In this example, it’s just a desktop and a mobile version, plus their image placeholders. For even better real-life performance, you might want to add more than just one breakpoint.

Thirdly, this implementation, as time-consuming as it is, skips on serving videos in optimal formats for different browsers.

Add all this together, and you can see how a manual optimization of a native HTML video element can quickly spiral out of control or lead to cutting corners.

The easy way to the perfect integration of autoplay videos: TwicPics

TwicPics allows you to brilliantly solve all the challenges of video integration in no time.

In the previous section, we’ve shown that even a partial optimization of video content is a tedious task if done manually. Alternatively, you can easily get a perfect result out-of-the-box with the responsive autoplay videos by TwicPics.

All you would have to do is:

1. Sign up for a TwicPics account.
2. Set up your account by creating your workspace, a TwicPics domain, and a path to your video storage location.
3. Copy-paste the single-line TwicPics script into your website's HTML, or import the TwicPics Component for your front-end JS framework (available for React, Vue, Svelte, Angular, or as Web Components).
4. Update the URLs of your autoplay videos to point to their relative TwicPics URL.

TwicPics understands the device context and your page’s CSS to perfectly adapt your media to each user. It optimizes the autoplay videos in the same manner as responsive images.

After the setup described above, TwicPics will automatically:

• Generate the versions of the video matching each user’s screen size (and DPR) and optimal format for each user’s browser
• Use optimal compression techniques to reduce video file size while maintaining visual quality.
• Generate placeholder posters for improved perceived performance
• Convert the inefficient GIFs into more lightweight MP4 (or WEBM) videos.
• Cache your loop videos and serve them from a globe-spanning CDN network.

On top of that, the rich transformation API of TwicPics allows you to control art direction and the presentation of your videos.

In the rest of the article, we will compare the performance of responsive videos by TwicPics with the manually optimized videos.

An experiment: TwicPics Video vs. Manual Video Optimization

For this real-life experiment, we’ll reproduce the same page as in Simon Hearne’s original article. We will host three versions of this page on GitHub:

• Unoptimized page
• Page with manually optimized video (same 4 steps as in the article)
• Page with TwicPics automatic video optimization

The objective is to compare their performance in a lab environment.

Performance: No Video Optimization

As we could expect, the initial sample page with unoptimized video is awfully slow. Here are its performance metrics on a mobile (synthetic testing by WebPageTest):

There are some caveats regarding the measures of web performance for pages with autoplay videos. LCP metric isn’t a relevant indicator for pages with hero section videos: videos aren’t considered candidates for the LCP element. Web performance monitoring tools also often have some difficulty in detecting CLS when it involves large hero videos.

A quick look at the filmstrip is a more reliable way to gauge the loading speed for pages with autoplay videos.

The filmstrips of loading of the unoptimized page show multiple instances of huge layout shifts and a total of 22 seconds of waiting before the video is rendered.

Performance: Manual Video Optimization

We reproduced the same manual optimizations to Simon Hearne’s sample page as he did in his article. You can read the original guide for the details.

We see immediate improvements across the board:

Looking at the filmstrip, we can see that there are no longer any layout shifts. The JavaScript ensures that mobile users are served the mobile version of the video straight away:

As a result, we now see the video after 6.5 seconds instead of the 22 seconds waiting time we experienced on the unoptimized page.

Performance: Responsive Video by TwicPics

Delegating the handling of responsive video to TwicPics is clearly easier than manual optimizations, but what about the loading speed of this hassle-free approach? It’s time to check it.

Here is the performance audit of our page with the hero section video optimized by TwicPics.

The “start render” time is also less than half compared to the manually optimized page. The overall Speed Index went down by 1.5 seconds.

As you can see from our filmstrip, we now see the first frame of the video at just 4.0s. That’s five times faster than without optimization, and roughly 1.6x faster than under manual video optimization.

Conclusion

The key takeaway is that responsive video optimization by TwicPics yields a much faster and more pleasant loading experience than manual optimization — and also saves lots of time for the front-end developers.