vidstack

by radek

HTML

<link rel="stylesheet" href="https://cdn.vidstack.io/player/theme.css" />
<link rel="stylesheet" href="https://cdn.vidstack.io/player/video.css" />

<zzVideo class="zzVideo" data-src="youtube/ssvK18GSsEA"></zzVideo>
<br>
<zzVideo class="zzVideo" data-src="youtube/_hJnevvcuEQ"></zzVideo>

<script type="module">
  import { VidstackPlayer, VidstackPlayerLayout } from 'https://cdn.vidstack.io/player';

var players = [];

[...document.getElementsByTagName("zzVideo")].forEach((element, i) => {
//    console.log(element.dataset.src + ' - '+i);
    element.id = "zzVid"+i;
   
players[i] = VidstackPlayer.create({
         target: '#zzVid'+i,
         title: 'Video #'+1,
         src: element.dataset.src,
      //    poster: 'https://files.vidstack.io/sprite-fight/poster.webp',
         layout: new VidstackPlayerLayout({
      //      thumbnails: 'https://files.vidstack.io/sprite-fight/thumbnails.vtt',
         }),
       });
  });
   
   </script>