<!-- wp:html --> <div class="player-wrapper"> <div id="player"></div> <div class="block-layer"></div> <button id="toggleButton">▶</button> <div class="timeline"> <div class="progress"></div> </div> </div> <script> // Load the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '315', width: '560', videoId: '7RXLoTL5df0', playerVars: { 'autoplay': 0, 'controls': 0,'autohide':1,'wmode':'opaque', iv_load_policy: 3, rel: 0 }, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } let interval; document.querySelector('.timeline').addEventListener('click', function(event) { if (player.getPlayerState() === 5) { document.getElementById('toggleButton').textContent = '❚❚'; } console.log(player.getCurrentTime() + " - seek"); const timelineWidth = this.offsetWidth; const clickPosition = event.offsetX; const percentage = (clickPosition / timelineWidth); const seekTime = player.getDuration() * percentage; player.seekTo(seekTime, true); }); // Make sure to clear the interval when the video ends or when the user navigates away from the page function onPlayerStateChange(event) { if (event.data == YT.PlayerState.ENDED) { document.querySelector('.progress').style.width = '0%'; player.seekTo(0); player.pauseVideo(); //clearInterval(interval); document.getElementById('toggleButton').textContent = '▶'; document.getElementById('toggleButton').style.opacity = '1'; } } function updateProgressBar() { const currentTime = player.getCurrentTime(); const duration = player.getDuration(); const percentage = (currentTime / duration) * 100; document.querySelector('.progress').style.width = percentage + '%'; } function onPlayerReady(event) { interval = setInterval(updateProgressBar, 100); // Update every second } document.getElementById('toggleButton').addEventListener('click', function() { console.log("toggle"); if (player.getPlayerState() === YT.PlayerState.PLAYING) { player.pauseVideo(); this.textContent = '▶'; } else { player.playVideo(); this.textContent = '❚❚'; } }); </script> <style> .player-wrapper { position: relative; width: 100%; /* This takes up the full width of its parent container */ padding-bottom: 56.25%; /* 16:9 aspect ratio */ overflow: hidden; /* Ensures nothing spills outside the container */ } #player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .block-layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 1; } #toggleButton { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; background-color: red; color: #fff; border: none; border-radius: 5px; opacity: 1; transition: opacity 0.3s; z-index: 2; font-size: 35px; line-height: 60px; width: 70px; &:hover { opacity: 1; } } .player-wrapper:hover #toggleButton { opacity: 1; /* Show button when player-wrapper is hovered */ } .timeline { position: absolute; bottom: 10px; left: 10px; right: 10px; height: 5px; background-color: rgba(255, 255, 255, 0.3); cursor: pointer; z-index: 3; /* Above the block layer and button */ } .progress { width: 0; height: 100%; background-color: red; } </style> <script> let timeout; document.querySelector('.player-wrapper').addEventListener('mouseenter', function() { clearTimeout(timeout); // Clear any existing timeout document.getElementById('toggleButton').style.opacity = '1'; }); document.querySelector('.player-wrapper').addEventListener('mouseleave', function() { timeout = setTimeout(() => { document.getElementById('toggleButton').style.opacity = '0'; }, 1000); // Delay hiding for 1 second }); </script> <!-- /wp:html -->
