Video Player in HTML (video tutorial)
Last updated: Sep-02-2024
On this page:
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
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
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
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
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
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
- Read our Video Player guide and reference, covering every available parameter option.
- Check out some Video Player code explorers that you can fork for trying out some sample configuration changes.
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
If you like this, you might also like...
Upload Assets in React
Upload assets using the Upload widget in a React AppVideo Transformations
Build an e-commerce video showcasing products, in Node.jsContent-aware Video Cropping
Smartly crop a video using content-aware AI
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.
✖️