Last updated: Aug-18-2025
OverviewThis video tutorial teaches you how to customize and embed the Cloudinary Video Player into your HTML document or any app.
Video tutorial Tutorial contentsThis 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 newiframe 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.
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   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 generatediframe 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.
Â
âï¸ Feedback sent!
âï¸Â  ErrorUnfortunately there's been an error sending your feedback.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4