CODEWITHSUNDEEP
javascriptjqueryvimeo
froggomad
froggomad

Reputation: 1915

Vimeo player doesn't play on vimeoPlayer.play(); in script, but it does in console

The following code adds a play button overlay to the video on the page and adds a click handler to play the embedded vimeo player:

const $videoDiv = $('#video-inner');
$videoDiv.append('<i class="far fa-play-circle" id="playbtn"></i>');
const playbtn = document.getElementById('playbtn');
const player = document.getElementById('video-player');
const vimeoPlayer = new Vimeo.Player(player);
playbtn.onclick = function() {
    vimeoPlayer.play();
}
vimeoPlayer.on('pause', function() {
    playbtn.style.display = "block";
});
vimeoPlayer.on('play', function() {
    playbtn.style.display = "none";
});
.fa-play-circle {
 position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20rem;
    -webkit-transform:  translate(-50%, -50%);
    -moz-transform:     translate(-50%, -50%);
    -ms-transform:      translate(-50%, -50%);
    -o-transform:       translate(-50%, -50%);
    transform:          translate(-50%, -50%);
    z-index: 2;
    color: white;
}

.fa-play-circle:hover {
    cursor: pointer;
}

#video-inner {
    position: relative;
    border: none;
    height: 100%;
    top:0;
}

#video-outer-full {
    position: fixed;
    top: 15%;
    top: 15vh;
    height: 45%;
    height: 45vh;
    width: 100%;
    width: 100vw;
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    background-color: black;
    z-index: 1;
}
<head>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<div class="video-overlay">                
  <div id="video-outer-full">
      <div id="video-inner">                            
          <iframe id="video-player" class="video" width="560" height="315" src="https://player.vimeo.com/video/309741585" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>
      </div>                    
  </div>                
</div>

This works as expected on localhost, but isn't working live. There's no output in console to indicate a problem, Visual Event bookmarklet (http://www.sprymedia.co.uk/article/Visual+Event+2) shows the click handler with the proper code (vimeoPlayer.play();) but nothing executes on click.

Typing vimeoPlayer.play() in console plays the video, but playbtn's style doesn't change to none. It's as if everything related to playbtn after appending it to $videoDiv is ignored.

Since this can't be replicated anywhere but on the actual page, here's the link: https://nuclearterrortoday.org/pages/videos.php?api=1

Upvotes: 1

Views: 791

Answers (1)

Nathan
Nathan

Reputation: 499

It's because you have two elements with the id 'playbtn'.

const playbtn = document.getElementById('playbtn');

You add the clicker handler to the first, but actually click the second. Remove the duplicate and it will work.

Upvotes: 1

Related Questions