Cloudinary Blog

Harness the Power of Video on Your Landing Page

Beef Up Your Home Page With Video

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.

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:

Copy to clipboard
<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.

Copy to clipboard
var cld = cloudinary.Cloudinary.new({ cloud_name: '<cloud-name>' });
document.getElementById('media').innerHTML = cld.videoTag('<full-media-name>').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:

video file

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

loaded files

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:
Copy to clipboard
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).

webm file

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:

    Copy to clipboard
    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:

Copy to clipboard
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.

Recent Blog Posts

Get Your Media Moving Faster with Cloudinary’s Media Optimizer

So, your boss comes to you in a panic: he's just heard about Google's Core Web Vitals initiative and needs you to optimize the company website right now! "No problem," you say, hiding your fear that it's not something that can be done overnight. Just taking the first metric, Largest Contentful Paint (LCP), how can you possibly identify all the large elements - most likely images or video posters - of the many hundreds of pages that make up your site? There are already thousands of high-resolution (read massive) media files stored away, which marketing could use any time. How are you going to make sure they're all compressed to a size small enough to be delivered within the threshold? Not to mention all the new images and videos that will be created over time...

Read more
How to Tap Into the Value of User-Generated Content (UGC)

User-generated content (UGC) took off with, first of all, the advent of the internet and, subsequently, social networks. Everyday consumers were given keys to the kingdom, so to speak, so that they, too, could compose and post content, simultaneously engaging with others online. Twitter, Facebook, Instagram, Snapchat, TikTok—the networks through which we can create and publish content have grown exponentially, and brands are becoming aware of the benefits of tapping into the gold mines offered by those networks.

Read more
Identifying Countries by IP Address in Columnar Databases Through SQL

Cloudinary reaps a myriad of open web traffic, from ad networks to e-commerce sites. Our Data Science team is dedicated to analyzing the data for use internally and externally.

A glance at any General Data Protection Regulation (GDPR) article would reveal that—unlike Android device IDs (AID), through which users can reset their web address—keeping user identifiers, such as Internal Protocol (IP) and Media Access Control (MAC) addresses, as well as International Mobile Equipment Identity (IMEI), violates privacy. As a solution, you can discard all privacy identifications or make them visible to users for reset.

Read more
Digital-First Asset Management Explained

As the world changes, so does technology. I don’t need to name more than a handful of antiquated technologies before you nod in agreement: floppy disks, Walkmans, phone booths, VHS tapes, each of which have been phased out or rendered useless by new solutions that meet the same need but much more effectively.

Read more
How to Build Workflows With Cloudinary’s MediaFlows

Many of you who work with the Cloudinary platform have a media-associated workflow for moderation of images, dispatch of notifications with certain data or headers, implementation of activities through add-ons, etc. For most of those cases, Cloudinary would suggest that you take advantage of our webhook notifications and build the workflow with an infrastructure like AWS Lambda. This post describes how to do that with Cloudinary’s MediaFlows a beta product that helps tackle management and operational tasks related to visual media.

Read more