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 take 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, the media content takes most of the page-load time (compared to other resources on the page), 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 values 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, sign up for a free account with free credits.

Recent Blog Posts

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more