Harness the Power of Video on Your Landing Page

Modern webpages are more than just plain text. With HTML5, it’s no longer a challenge to play media on webpages. You can—and should—provide your audience with an engaging, high-quality multimedia experience on your site.

Leading brands, such as Peloton and Allbirds, gain a competitive edge by engaging with customers through video, showcasing their product line as soon as shoppers land on their site. That’s because videos are captivating and supportive of website text, offering visitors a more visceral, kinetic experience for a deeper connection with a company or product.

However, showing media online comes with challenges, sometimes leading to a poor user experience, especially if your media is not tailored for the visitor’s device or network connection. Also, several browsers are blocking the HTML5 autoplay attribute, and other browsers might cause your app’s JavaScript to crash if it loads a video too soon. Those problems often lead to visitors missing content or not experiencing your site as intended. Fortunately, tools are readily available for optimizing the video experience.

Separately, remember that some of your primary audience might dislike or complain about autoplay videos. For example, if most of your site’s visitors are software developers, a video above the fold might hurt. Providing a clean visual experience with no subtitles and muted audio often reduces negative responses from video-averse audiences.

This tutorial describes the best practices for serving video and the ways in which Cloudinary can help tackle the related challenges. You’ll learn how to configure media quality and how to encode content in formats supported by your audience’s devices.

To follow the steps in this tutorial, first create a free account on Cloudinary. You get 25 free credits per month to use Cloudinary’s tools to manage your media and enhance your website.

This is part of a series of articles about Marketing videos.

Improve Page Performance

Loading media on page load might slow down your website because videos, in particular, take up a big percentage of the bandwidth, slowing page rendering on small-screen devices and low-bandwidth networks. To fix that problem, optimize media resources with compression techniques and change the codecs. Certain file types offer smaller-sized, lossy media, but with similar media detail to larger files.

Here’s what to do:

1. Add media to your webpages with Cloudinary’s JavaScript SDK, which you can download or integrate with CDNs. Although you can upload a new media resource, this tutorial makes use of the sample media files from the Cloudinary console.

Start by injecting the Cloudinary SDK into your webpage:

<script src="https://unpkg.com/cloudinary-core@latest/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>

2. Create an instance for Cloudinary and specify the value of cloud_name, which is displayed on your Cloudinary console.

var cld = cloudinary.Cloudinary.new({ cloud_name: '' });
document.getElementById('media').innerHTML = cld.videoTag('').toHtml();

Because the toHtml method above returns a string for the HTML code with which you can render media content on your webpage, you are injecting it in an HTML element. This sample video file is over 26 MB in size:

Loading it means that you end up loading the entire file:

As shown in the screenshot above, compared to other resources on the page, the media content takes most of the page-load time, negatively impacting the page performance by—

• Reducing your SEO rating due to the lengthy page-load time.
• Worsening the user experience on a slow or metered connection.
• Taking users by surprise if the content suddenly loads after they start surfing the page, potentially causing a cumulative layout shift that further worsens the experience and that leads to a poor SEO rating.

To solve that large-file challenge, use the Cloudinary SDK. See the next step.

Pass a `quality` attribute to the code above:

document.getElementById('media').innerHTML = cld.imageTag('<full-media-name>', { quality: "auto", fetchFormat: "auto" }).toHtml();

The loaded video is now smaller in size and in a different format (WebM instead of MP4).

Compared to the other resources, the video is smaller (1.3 MB), taking notably less bandwidth. Loading takes only 37 milliseconds. You can control the compression ratio for your media with the `quality` attribute by passing on a value between low quality (valued as 20) and the highest-possible quality (valued as 100).

Another way to improve video performance is by changing the format or encoding. For example, Cloudinary can convert a GIF to a more bandwidth-friendly format like MP4 and stream it to your audience. You can control that conversion with the fetchFormat attribute by taking either of these two steps:

• Pass auto as a value. Cloudinary would then automatically encode and stream the media in an appropriate format based on the content, the viewing device, and the network.
• Pass the required format in the request with the `fetchFormat` property to control the value of the format, such as JPG or WebM.

Cloudinary’s `fetch_format` parameter enables you to optimize the format and quality of your video simply by adding these two flags to your URL:

• f_auto, which causes Cloudinary to detect the viewing browser and deliver your video in the optimal format.
• q_auto, which causes Cloudinary to check whether it can alter the video format to reduce size without losing quality.

With f_auto and q_auto, you can optimize the visual experience while delivering fast, reliable page loads. For more details, see Cloudinary’s documentation on video optimization.

Apply Creative Cropping

If your website shows media with an aspect ratio that differs from that of your user’s screen, certain details of the media might be lost due to screen bounds and constraints. Hence, be sure to specify a suitable aspect ratio for your media.

However, during video cropping, it can be tricky to ensure that perfect content is displayed for all devices, especially when it comes to maintaining the optimal focus on moving subjects. You can easily control the aspect ratio while delivering content on Cloudinary by taking either of the following steps:

• Manually crop videos for each specific screen size and orientation from the Cloudinary console in Edit mode.
• Automatically crop and snap videos for each and every screen layout with the Cloudinary SDK’s content-aware cropping feature, which uses the machine learning technology to intelligently crop videos, focusing on automatically detected areas of interest. Simply specify the attributes and let the platform handle the task for you:

cld.videoTag('<full-media-name>', { width: 300, gravity: "auto", aspectRatio: "1:1", crop: "fill" }).toHtml();

This code shows a squared video element. Even though your original video is not square, Cloudinary would crop it automatically, as shown in the image below. You can change the values for aspect_ratio based on the values provided for that attribute.

For details on advanced cropping features, see the post Automatically Crop Videos Without Losing Focus.

Create an Engaging User Experience

Be sure to control certain media elements directly in the browser. Missing those settings, which include the following, results in a poor user experience:

• Muting video by default
• Preventing video looping
• Playing video only if a user interacts with the page (instead of autoplay)
• Using video’s transparency channel

You can pass those settings directly to Cloudinary’s JavaScript SDK to load the HTML elements in a specific state of player behavior, like this:

cloudinary.video("media-name" { crop: "crop", loop: true, autoplay: true, fallback_content: "Your browser does not support HTML5 video tags" })

You can also fine-tune your website with Cloudinary’s advanced settings, e.g., set autoplay in the native-browser element to true or false. Another option is to set `autoplay` to `on-scroll`, which plays the video as soon as the <video> element is in the viewport.If a device does not support any of the properties, Cloudinary does its best to handle the fallback. You can also handle any errors thrown during page-load.

Additionally, video transparency, which means showing the background HTML content behind a <video> element, is a powerful and often overlooked feature. The Cloudinary SDK contains a special method called injectTransparentVideoElement, which shows a transparent video overlay on top of your HTML content. Check out this blog post for a demonstration.

Take the Next Steps

To recap, media content enhances websites, fostering engagement and helping you get ahead of the competition. When done right, videos are a powerful addition to websites.

Feel free to play with Cloudinary’s media samples as you did above, or crop and enhance your own videos with the Cloudinary SDK. You and your media team can then develop and display outstanding content for your visitors, effectively showcasing your product and guiding potential customers to important parts of your site.

Again, to get started on discovering how Cloudinary can help grow your business through effective media management, sign up for a free account with free credits.