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

Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more
Readying Live Streams for Video on Demand

When planning a live broadcast or stream, companies often overlook the redistribution phase, but live-stream videos are useful well beyond their initial streaming. Why? Because not everyone watches the first run. For a wider audience, it makes sense to repost live content on your website under an “events” tab, on YouTube, and other social sites for video on demand (VOD). However, preparing footage for reposting can be a lot of work.

Read more
Optimize Visual Media for a Fast and Captivating Digital Experience

Did you know that humans process imagery 60,000 times faster than text? In fact, 90% of the information our brains process is visual, which makes it seem a no-brainer—pun intended—that brands are connecting with consumers through visual content online. However, adding media assets like images and videos to websites comes with a tradeoff: the more media, the heavier the site, which results in a noticeable slowdown in page loads and a reduction in content quality.

Read more