Programmable Media

Video Player in HTML (video tutorial)

Last updated: Jul-19-2024

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

Jump to this spot in the video  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

Jump to this spot in the video  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.

Note
Make sure to use your own cloud name instead of colbycloud-examples and a public ID for a video in your product environment instead of videos/guitar.

Recommended settings

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Related topics

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

Upload Assets in React
Upload assets using the Upload widget in a React App
Video Transformations
Build an e-commerce video showcasing products, in Node.js
Content-aware Video Cropping
Smartly crop a video using content-aware AI

 

Cloudinary Academy

 

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.

 

✔️ Feedback sent!

Rate this page: