JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.3.0/cloudinary-core-shrinkwrap.js"></script>
<script src="https://unpkg.com/cloudinary-video-player@edge/dist/cld-video-player.min.js"></script>
<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<link rel="stylesheet" href="https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css">

<div style="max-width: px">
  <video id="doc-player"  controls  muted  class="cld-video-player cld-fluid"></video>
</div>

JavaScript

var cld = cloudinary.Cloudinary.new({ cloud_name: 'demo' });


var source1 = { publicId: 'snow_deer_short' };
var source2 = { publicId: 'snow_horses' };
var source3 = { publicId: 'sea_turtle' };


var adTagUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=6";

var demoplayer = cld.videoPlayer('doc-player', {
  fontFace: 'Yatra One',
  playlistWidget: {
    direction: 'vertical',
    total:5
    }}).width(600);



 var adsplayer = cld.videoPlayer('demo-ads-player',{fontFace: 'Yatra One',
  playlistWidget: {
    direction: 'vertical',
    total:5, ads: {adTagUrl: adTagUrl});
var adsPlaylistSources = [source1, source2, source3];
var adsPlaylistOptions = {
  autoAdvance: true,
  repeat: true,
  presentUpcoming: 8
};
adsplayer.playlist(adsPlaylistSources, adsPlaylistOptions);