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();
});