The Optimal Ways to Embed Video According to Use Cases

Why do we need different ways to embed video content?

At first glance, the multitude of options for video embeds makes it extremely easy to display video content on any website. But the issue is more complex than it seems. The method you choose for integrating a video has deep implications on load speed, user experience, branding, and the entire digital asset management workflow.

Each type of video content imposes its own requirements on the integration:

• Brand videos: you need full control over the presentation to ensure your video embed aligns seamlessly with your brand. Understandably, you don’t want platform-specific branding and controls to interfere with your brand identity. And of course, you can’t allow the platform’s recommendation engine to suggest competitor’s videos.
• Testimonials: testimonials are most effective when used to build social proof by sharing on multiple channels. Custom controls and branding are not as essential, but the ability to easily share is.
• Hero section videos: fast load speed is key to avoid users bouncing from your page in the first few seconds. These videos are typically on autoplay and loop endlessly, meaning there’s no need for controls.
• Product videos: a seamless integration of product videos into your responsive layout and fluid loading are prerequisites for creating a truly immersive online shopping experience. These videos are typically short, as a few seconds are often enough to showcase a product from different angles.

As you will see in the following section, there are different ways to embed video content that address the special needs of each use case.

The two ways to embed video content

iFrame

This least technical (and arguably also the most common) method for embedding videos works as follows:

• Host a video on a platform like YouTube, Vimeo, or Wistia
• Copy-paste several lines of HTML code provided by the platform to embed their player as an iFrame

These steps would bring the platform’s video player to any page.

However, this simplicity comes at the cost of very limited options for configuration, and a noticeable time necessary to load the iFrame. The page load time might also be penalized by the platform’s tracking scripts.

According to an independent test, the player embeds from the 4 most popular video platforms take the following times to load:

Some third-party embeds come with attributes that you can enable or disable. But since it’s an external resource with its own DOM and cross-origin policy, you’ll be restricted in what you can customize with CSS and JS.

The example below shows an iFrame embed from YouTube on the official website of Golden Race – the round-the-world yacht race organized by Sunday Times.

You will generally have to pay for the video platform’s premium plans to display your video without ads, block recommendations of competitors’ videos, etc.

Advantages of Embedding Video With iFrame:

• Quick and easy way to embed videos with functional players
• No need to personally host original video files
• Built-in functions like “watch later” and social sharing buttons
• Compatible with nearly all browsers (including older versions)

Disadvantages of Embedding Video With iFrame:

• A lag and slower load because the video comes from an external domain.
• The video platform’s tracking scripts might slow down your page even more.
• Premium plans might be required to avoid ads or recommendations of competitor’s videos.
• Limited options to customize the video player. You might have to go for premium plans to access even these options.
• Difficult to integrate into a responsive template.

HTML 5 Video Element

The HTML5 <video> element is a native tag that can embed and play video content directly on a web page. By default, it comes with the basic controls (play, pause, volume), and supports the MP4, WEBM, and OGG formats.

It is rather straightforward to display a video with the native HTML5 video element, provided you’re familiar with the basics of web development. The element can be manipulated just like any other HTML tag. Its appearance and behavior can be further customized with CSS and JavaScript.

Embedding a video with the HTML5 video tag gives you numerous choices:

• Store your video on your hosting, or put it from external platforms or CDNs.
• Choose the streaming protocol. The HLS (http live streaming) is the most popular option, seconded by DASH (Dynamic -Adaptive Streaming over HTTP). Both are adaptive bitrate protocols: they adapt the quality automatically to the user’s internet connection at any moment.
• Personalize the player with custom CSS and JS, or use third-party HTML5 players or open-source JS libraries for this purpose.

Advantages of Embedding Videos Using HTML5:

• No lag to load the player
• Can be highly customized using CSS and JavaScript
• Virtually no footprint with no additional scripts or libraries
• Easy to optimize like any other HTML elements

Disadvantages of Embedding Videos Using HTML5:

• Advanced features, like skins and analytics, don’t come out-of-the-box
• Without some minimal CSS styling, the player might look slightly different according to the browser
• Coding expertise or third-party libraries might be required to customize the player

The next section will explain which of these choices might be optimal for different use cases.

Long-format video content

Movies, video tutorials, testimonials, and other long-format videos can be seen as standalone content. Users expect to watch such videos for at least several minutes. This means convenient controls are required: scrub bar navigation, speed, and full-screen mode. Captions and subtitles are recommended for accessibility. Last but not least, social sharing buttons are a lever to boost the video's reach.

From a technical point of view, the larger file size of long-format videos necessitates more storage and server bandwidth. On the other hand, a few seconds of lag while loading the player and buffering the video is acceptable in this context.

Given the above needs, the following three options seem attractive to embed the long-format video content:

1. Host the video on a popular video platform and embed an iFrame with a player provided by the platform. Pay for the platform's premium plans to remove ads and recommendations of external content.
2. Host a video on a platform. Include an HTML5 video element with the platform's HTML5 video player.
3. Host a video on a platform or a CDN service. Include an HTML5 video element with an HTML5 video player provided by specialized editors (JWPlayer, Calppr), or customize the native HTML5 player with an open-source library.

We listed these three options ranked by possibilities for customization. The third option will give you the greatest level of control over the viewing experience, features, and controls. The optimal choice would depend on your technical skills, budget, and the role of video content on your website.

Short autoplay videos

Autoplay looping videos allow web designers and developers to create truly immersive on-page experiences.

Hero section videos are the most frequent use case. They are a great way to convey the brand’s positioning. Here’s an example from Bobbies, a Parisian shoes and leather accessories brand:

Product videos are another widespread application. More engaging than still images, they help the customers discover the product from different perspectives. In the e-commerce context, product videos are a proven technique to increase the conversion rate. They also enable the customer to make a better choice, and therefore help avoid purchase returns. The website of Typology, a D2C cosmetics brand, shows how engaging a product video can be when displayed in the product gallery:

Due to the short duration of such autoplay videos, there’s no need to provide advanced playback controls.

Another particularity of autoplay videos is the absence of sound. The autoplay clips should be muted, to avoid surprising the user with an unexpected sound burst. Chrome and other modern browsers might even block an autoplay video if it fails to comply with this best practice.

The essential place of the autoplay videos in the on-page design calls for special attention to the following UX checkpoints:

• Avoid layout shifts and unexpected empty spaces while the player is loading
• Ensure the video loads fast to provide a fluid user experience

These guidelines become even more important when the autoplay video is an LCP element.

Due to these performance requirements, we can immediately eliminate iFrame as a viable option. The initial delay of loading an external video will be too high to use for a video that qualifies as the LCP. Also, the fact that you may not be able to disable all the controls and customize the branding will ruin the immersive experience.

The advantages of the HTML5 video element make it the perfect fit for this use case. As you don’t need advanced controls, you can disable or customize the standard built-in controls according to your needs.

The native HTML5 video player is the fastest to load, but there would still be an important lag if you don’t optimize the size of the video file. (For a 10-seconds video, it could easily vary from 0.5 to 10 megabytes, according to the resolution and format).

The optimization of short videos becomes easy with the responsive autoplay videos by TwicPics. TwicPics optimizes short videos on the fly according to each user’s context.

The two autoplay videos embedded in this article are delivered by TwicPics. They are cropped and sized automatically to match their display size on the screen of your device, and a poster is generated to create a more fluid experience while the video is loaded. The videos are converted to the optimal format supported by your browser, cached, and delivered from a global CDN. With TwicPics, the perfect integration of optimized autoplay videos follows the same simplified workflow as the integration of images.