JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<link href="https://unpkg.com/[email protected]/dist/cld-video-player.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/cloudinary-core-shrinkwrap.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/[email protected]/dist/cld-video-player.min.js" 
    type="text/javascript"></script>

<body>

    <h1>Cloudinary Video Player - MULTIPLE VIDEOS</h1>


 

<!--Store Video -->
<video
    data-cld-public-id="storerendered11991"
    muted
    loop
    data-cld-autoplay-mode="on-scroll"
    allow="fullscreen; encrypted-media"
    frameborder="0"
    class="cld-video-player cld-video-player-skin-dark">
</video>

<!--Demo Video -->
<video
    data-cld-public-id="demo-rendered2_v1brpp"
    muted
    loop
    data-cld-autoplay-mode="on-scroll"
    allow="fullscreen; encrypted-media"
    frameborder="0"
    class="cld-video-player cld-video-player-skin-dark">
</video>


<!--My Products Video -->
<video
    data-cld-public-id="products-rendered-fix_c8qe9m"
    muted
    loop
    data-cld-autoplay-mode="on-scroll"
    allow="fullscreen; encrypted-media"
    frameborder="0"
    class="cld-video-player cld-video-player-skin-dark">
</video>

<!--Team Video -->
<video
    data-cld-public-id="team-rendered-fix_zhatrs"
    muted
    loop
    data-cld-autoplay-mode="on-scroll"
    allow="fullscreen; encrypted-media"
    frameborder="0"
    class="cld-video-player cld-video-player-skin-dark">
</video>

<!--Inventory Video -->
<video
    data-cld-public-id="inventory-rendered-fix_qoqqmr"
    muted
    loop
    data-cld-autoplay-mode="on-scroll"
    allow="fullscreen; encrypted-media"
    frameborder="0"
    class="cld-video-player cld-video-player-skin-dark">
</video>

<!-- Cloudinary Video Player Dependencies -->
  <!-- Actual code -->
  <script type="text/javascript">
      var cld = cloudinary.Cloudinary.new({ cloud_name: 'dvianna' });

      // Initialize players
      var players =...