Close div when vimeo video ends

Viewed 645

I need a website to have a intro video (a full width div over the site/background content). So I made a Div with an iframe video (VIMEO) and a button to skip intro (it closes the div with js click).

But I still need it to automaticly close the div just after the video ends. Is there a way to trig this event when vimeo video ends?

I found a way to this in youtube (with api), but unfortunatelly i Need it to be in vimeo because it's possible hide the controls , logo and everything.

Thank you so much for your attention.

**-- UPDATE (IT WORKS!)-- Thanks for your help! If someone needs a similar solution, here it is the code: **

<div id="videointro">

<iframe src="https://player.vimeo.com/video/xxxxxxxxx?title=0&byline=0&portrait=0&transparent=0&autoplay=1&sidedock=0&controls=0" frameborder="0" title="Funny Cat Videos For Kids" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true"></iframe>

</div>

<button id="btn"></button>


<script src="https://player.vimeo.com/api/player.js"></script>
<script type="text/javascript" src="video.js"></script> 


-- JS --

btn.onclick = function () {
    document.getElementById("videointro").style.display='none';
};

// vimeo 

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

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

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

player.on('ended', function() {
    console.log('the end');
    player.destroy();
});
1 Answers

If someone needs a similar solution, here goes the code:


<div id="videointro">

<iframe src="https://player.vimeo.com/video/xxxxxxxxx?title=0&byline=0&portrait=0&transparent=0&autoplay=1&sidedock=0&controls=0" frameborder="0" title="Funny Cat Videos For Kids" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true"></iframe>

</div>

<button id="btn"></button>


<script src="https://player.vimeo.com/api/player.js"></script>
<script type="text/javascript" src="video.js"></script> 


-- JS --

btn.onclick = function () {
    document.getElementById("videointro").style.display='none';
};

// vimeo 

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

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

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

player.on('ended', function() {
    console.log('the end');
    player.destroy();
});

Related