Video Player in HTML (video tutorial)

Overview

This video tutorial teaches you how to customize and embed the Cloudinary Video Player into your HTML document or any app.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction to the Cloudinary Video Player

0:00	The Cloudinary Video Player provides a powerful way to deliver your videos in a customized way. You can embed the player in any app using the cloud-hosted player.

Add the Video Player manually

0:15	Build your cloud-hosted player manually, in either an HTML document or, for example, a React app. Add a new iframe with https://player.cloudinary.com/embed/?<parameters> as the source, with two required parameters: your cloud_name, which you can find on the Dashboard of the Console UI, and the public_id of the video in your product environment that you want to display.

Recommended settings

1:16	To make your video look even better, add the following recommended settings, changing the width and height to fit your design:

Add your video using the Video Player Studio

1:38	Even easier, use the Video Player Studio to build your customized cloud-hosted player. In the Video Player Studio UI, update the Video Source with your cloud name and the public ID of the video you'd like to display, and customize by specifying a Poster image, changing the Theme and more.

Using the generated code snippet

1:53	The Video Player Studio generates the code that you can use to embed your customized Video Player in your HTML document or app. Once you're done customizing, copy either the JavaScript sippet, or the embed snippet and paste the generated iframe into your application. In an application such as React, you may have to make the style parameter an object:

Keep learning

If you like this, you might also like...

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.