I am in need of a website that includes an intro video displayed as a full-width div over the background content. To achieve this, I created a Div containing an iframe video from Vimeo along with a button to skip the intro (which closes the div upon clicking through JavaScript).
However, my next requirement is for the div to automatically close once the video ends. Is there a way to trigger this event when the Vimeo video reaches its end?
I have come across a solution using YouTube's API for this purpose, but unfortunately, I must use Vimeo due to the ability to hide controls, logo, and other elements.
Thank you for your attention and assistance.
**-- UPDATE (SUCCESS!)-- Thank you for all your help! For anyone seeking a similar solution, here 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();
});