JSFiddle - React, Tailwind, and code Playground

by luwes

HTML

<div id="player"></div>
<div class="cover"></div>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var div = document.querySelector('#player');
    var player = new Vimeo.Player(div, {
    	url: 'https://vimeo.com/117628906'
    });

    player.on('play', function() {
        console.log('played the video!');
    });

    player.getVideoTitle().then(function(title) {
        console.log('title:', title);
    });
</script>

CSS

.cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 255, 0, 0.2);
}

JavaScript

document.querySelector('.cover').addEventListener('click', () => {
	player.play().then(() => {
  	console.log('Play cover click worked!!');
  })
});