JSFiddle - React, Tailwind, and code Playground

by Larzan

HTML

<script src="https://player.vimeo.com/api/player.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js?ver=2.1.0"></script>
<a data-pid="ap-popup-0" class="ap-thumb-container">
  <img class="ap-thumb" src="http://aproductions360.com/wp-content/uploads/2016/11/Untitled-design-2-640x360.jpg" style="opacity: 1;">
  <div class="ap-playbutton">
  <img src="http://aproductions360.com/wp-content/themes/aproductions/assets/images//icon_play.png">
  </div>
</a>
<div class="ap-popup-content" id="ap-popup-0">
  <a href="https://player.vimeo.com/video/181083345" data-vid="181083345">Backseat Fighter</a>
</div>

<a data-pid="ap-popup-1" class="ap-thumb-container">
  <img class="ap-thumb" src="http://aproductions360.com/wp-content/uploads/2016/11/Mindre-hud-i-solen-mellem-640x360-640x360.jpg">
  <div class="ap-playbutton">
    <img src="http://aproductions360.com/wp-content/themes/aproductions/assets/images//icon_play.png">
  </div>
</a>
<div class="ap-popup-content is-video" id="ap-popup-1">
  <a href="https://player.vimeo.com/video/171195301" data-vid="171195301">Mindre hud i solen mellem - TV Series</a>
</div>

<a data-pid="ap-popup-2" class="ap-thumb-container  haz-video ap-nogallery">
  <img class="ap-thumb" src="http://aproductions360.com/wp-content/uploads/2016/11/Sin-Limites-Ford-640x360-640x360.jpg" style="opacity: 1;">
  <div class="ap-playbutton">
    <img src="http://aproductions360.com/wp-content/themes/aproductions/assets/images//icon_play.png">
  </div>
</a>
<div class="ap-popup-content is-video" id="ap-popup-2">
  <a href="https://player.vimeo.com/video/140070863" data-vid="140070863">Sin LĂ­mites</a>
</div>


<div class='center'>
  <div id="ap-popup-videobox">

  </div>
</div>

CSS

.ap-thumb-container {
  float: left;
  position: relative;
  margin: 10px;
  cursor: pointer;
}
.ap-thumb {
    overflow: hidden;
    display: block;
    position: relative;
    width: 320px;
    height: 180px;
    pointer-events: none;
}
.ap-playbutton {
  pointer-events: none;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 0;
    right: auto;
    left: 80px;
    bottom: 0;
    cursor: pointer;
}
.ap-popup-content {
  display: none;
}
.center {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

JavaScript

var player = -1;
var debugVid = true;

$('.ap-thumb-container').on('click', function () {

	console.log('here');

  var popupid = $(this).data('pid');
  var popupData = $('#'+popupid);

  // get the video links
  var videos = popupData.find('a');

    if (videos.length > 0) {

      // show the video box
      $('#ap-popup-videobox').show();

      // copy the infos
      popupData.parent().find('.ap-infoline').clone().appendTo('#ap-popup-info');

      // todo: adapt for multiple videos

      if (player === -1
          //    || player.origin === '*'
         ) {

        var options = {
          id: videos.eq(0).data('vid'),
          byline: 0,
          badge: 0,
          autoplay: 0
        };
        currentVideoID = videos.eq(0).data('vid');

        if (debugVid) console.log('player === -1', currentVideoID);

        player = new Vimeo.Player('ap-popup-videobox', options);

        player.on('loaded', function(data){
          console.log('DATA: ', data);
        });

        // PLAY
        player.play().then(function() {
          if (debugVid) console.log('the video was played');
        }).catch(function(error) {
          playerProcessError( error );
        });

        if (debugVid) console.log('player initialized (-1)', player);

      } else {

        var newVideoID = videos.eq(0).data('vid');

        // NEW VIDEO
        // -----------
        if (newVideoID !== currentVideoID) {

          currentVideoID = newVideoID;

          if (debugVid) console.log('player haz', currentVideoID);

          player.loadVideo( currentVideoID ).then(function (id) {

            // HIDE SIDEBAR
            // player.on('loaded', function(){
            //     $('#'+apCurrentPopup).hover(function(){
            //         console.log('in/on');
            //     }, function(){
            //         console.log('out');
            //     });
            // });

            // PLAY
            player.play().then(function() {
              if (debugVid)...