First, we need to create a function name onPlayerReady
window.onYouTubeIframeAPIReady = function () {
const iframe = document.querySelector('iframe');
iframe.setAttribute('id', 'player');
const player = new YT.Player('player', {
events: {
onReady: onPlayerReady,
},
});
};
In this function, we will find parent element
of the iframe
, then add class into it.
Then we will call it one the youtube is loaded.
function onPlayerReady() {
const iframeParent = window.frameElement.parentElement;
iframeParent.classList.add('media--loaded');
}
This class will really helpful if you want to make sure the user only can click to play video once it's fully loaded.
Add new comment