JSFiddle - React, Tailwind, and code Playground

by luwes

HTML

<script src="https://player.vimeo.com/api/player.js"></script>
<div id="players">
<div class="fluid-video-wrapper">
  <div>
    <iframe src="https://player2.vimeo.dev/video/74631147?autoplay=1&autopause=0" width="960" height="541" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" allow="autoplay"></iframe>
  </div>
</div>
</div>

CSS

.fluid-video-wrapper {
  position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
  max-width: 100%;
	clear: both;
}

.fluid-video-wrapper div,
.fluid-video-wrapper embed,
.fluid-video-wrapper object,
.fluid-video-wrapper iframe {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
	}

JavaScript

console.log("loaded");

var iframe = document.querySelector("#players iframe");
var player = new Vimeo.Player(iframe);

var ids = [74631147, 74345276, 74630446, 29708325];
var activeIdx = 0;

player.on("ended", function(data) {
  console.log("Vimeo ended event fired", data);

  var newIdx = (activeIdx += 1);

  if (ids[newIdx]) {
    player
      .loadVideo(ids[newIdx])
      .then(function(data) {
        console.log("Vimeo loadVideo called", data);
        player
          .play()
          .then()
          .catch(function(error) {
            console.error("Play Error!");
            console.log(error);
          });
        activeIdx = newIdx;
      })
      .catch(function(error) {
        console.error("Load video error!");
        console.log(error);
      });
  }
});