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

Automate the Staging Process of Videos for Social Media

Rich and engaging media helps build customer engagement and trust but can be time consuming to stage. Developers save a tremendous amount of time by preparing videos for social media with Cloudinary. That’s because Cloudinary’s interface, widgets, and application programming interface (API) transform raw media into polished content, optimizing footage and enabling effortless customization and publishing.

Read more

Top Five Web-Video Formats of 2021

By William Imoh
The Five Most Popular Web-Video Formats and Streaming Protocols

Over the past 15 years, the video industry has undergone a significant change in video formats on the web. In particular, in the early 2010s, the 3GP format, which the 3rd Generation Partnership Project (3GPP) created for 3G-enabled mobile devices, went nearly extinct. The advancement of mobile devices and cellular networks has brought about the need for pioneers to build better formats for a faster user experience.

Read more
Cloudinary Introduces Integration With SAP Commerce Cloud

We’re excited to announce Cloudinary’s integration with SAP Commerce Cloud, through which the latter’s customers can significantly boost the visual media experience on their website or app.

SAP Commerce Cloud powers some of the largest e-commerce sites (B2C, B2B, and B2B2C businesses), complete with building blocks like storefront design and order management. Reinforced with Cloudinary’s laser-sharp focus on optimizing, managing, and delivering images and videos, the new extension will enable SAP Commerce Cloud customers to create unique and engaging visual experiences effortlessly.

Read more
Personalizing Video Email for Marketing Campaigns With Cloudinary

As critical as it is to engage with shoppers in order to succeed in e-commerce, old-style, boring emails are far from being effective. In fact, they tend to be annoying because no one likes to read formulaic, generic messages that are sent en masse. For better results, rethink your email marketing campaigns and try out creative strategies.

Read more
Muted Videos and Subtitles

The bane of our existence is the lack of efficient ways for tackling the plethora of recurring tasks in our lives. One of those tasks is surfing the internet. We consume a lot of web content daily, of which a large percentage are images and videos. We’re constantly quickly scrolling through 30-second videos or checking out pictures of cute items we’d like to buy in our free time.

Read more

Building a Roommate-Matching App With Cloudinary and Jamstack

By Marcelo Ricardo de Oliveira
Building a Roommate-Matching App With Cloudinary and Jamstack

Roommate matching can be a pain—especially during the COVID pandemic when people don't want to meet in person. Matching apps like Flatmates, Roomster, and roommates.com are helpful, and if you're in the roommate-matching space, you know that great video is essential for those seeking roommates. Fortunately, Cloudinary can help.

Read more