Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I need help here please, I embed a YouTube video when a user watch the embed video for 30seconds I want the claim reward button to display then the rest action is left to livewire
<div class="p-3">
<div class="space-y-3">
<h2 class="font-bold">{{$video->title}}</h2>
<div class="relative rounded-lg overflow-hidden" style="padding-bottom: 56.25%;">
<iframe id="videoFrame" class="absolute top-0 left-0 w-full h-full rounded-lg" src="https://www.youtube.com/embed/{{$video->embed_code}}" frameborder="0" allowfullscreen></iframe>
</div>
<div id="claimButton" style="display: none;">
@if (!$claimed)
<button wire:click="claimReward" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
Claim Reward
</button>
@else
<div class="mt-2 text-green-500">Reward claimed</div>
@endif
</div>
</div>
</div>
Js
<script>
// Initialize YouTube Player API
var player;
// Function to initialize the player
function onYouTubeIframeAPIReady() {
player = new YT.Player('videoFrame', {
events: {
'onStateChange': onPlayerStateChange
}
});
}
// Function to handle player state change
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
// Video has started playing, start tracking time
startTime = Date.now();
} else if (event.data == YT.PlayerState.ENDED) {
// Video has ended, check if user can claim reward
checkWatchTime();
}
}
// Function to check watch time and show the "Claim Reward" button
function checkWatchTime() {
const currentTime = Date.now();
const elapsedTime = (currentTime - startTime) / 1000; // Convert to seconds
if (elapsedTime >= 30 && !claimed) {
document.getElementById('claimButton').style.display = 'block';
}
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>
I'm doing something similar and I use an AnimationPlayer to control the timing.
The animation has two tracks. One track animates the percent_visible property of the label, and the second track animates the visible property of the button. I increase the former from 0.0 to 1.0 over 0.8 second, and toggle the latter from false to true after one second https://mobdro.bio/ .
@fugami1 kindly drop your code
I tried this method still yet the claim button did not appear after watching the embedded YouTube video for 30 seconds , even the countdown timer is not showing
Please help
<div class="p-3">
<div class="space-y-3">
<h2 class="font-bold">TEST</h2>
<div class="relative rounded-lg overflow-hidden" style="padding-bottom: 56.25%;">
<div id="videoFrame"></div>
</div>
<div id="claimButton" style="display: none;">
<div id="countdown"></div>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" id="claimRewardButton">
Claim Reward
</button>
<div class="mt-2 text-green-500">Reward claimed</div>
</div>
</div>
</div>
js
<script>
// Initialize YouTube Player API
var player;
var claimed = false;
var startTime = null;
var countdownInterval;
// Function to initialize the player
function onYouTubeIframeAPIReady() {
player = new YT.Player('videoFrame', {
height: '360',
width: '640',
videoId: '{{ $video->embed_code }}', // Use the variable
events: {
'onStateChange': onPlayerStateChange
}
});
}
// Function to handle player state change
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
// Video has started playing, start tracking time
if (startTime === null)
startTime = Date.now();
// Start the countdown interval
countdownInterval = setInterval(updateCountdown, 1000);
} else if (event.data == YT.PlayerState.ENDED) {
// Video has ended, check if the user can claim the reward
checkWatchTime();
}
}
// Function to update the countdown timer
function updateCountdown() {
const currentTime = Date.now();
const elapsedTime = (currentTime - startTime) / 1000; // Convert to seconds
const remainingTime = 30 - elapsedTime;
if (remainingTime <= 0) {
clearInterval(countdownInterval);
document.getElementById('claimButton').style.display = 'block';
document.getElementById('claimRewardButton').style.display = 'block';
document.getElementById('countdown').textContent = '';
} else {
document.getElementById('countdown').textContent = `Time remaining: ${remainingTime} seconds`;
}
}
// Function to check watch time and show the "Claim Reward" button
function checkWatchTime() {
const currentTime = Date.now();
const elapsedTime = (currentTime - startTime) / 1000; // Convert to seconds
if (elapsedTime >= 30 && !claimed) {
clearInterval(countdownInterval);
document.getElementById('claimButton').style.display = 'block';
document.getElementById('claimRewardButton').style.display = 'block';
document.getElementById('countdown').textContent = '';
}
}
</script>
<script src="https://www.youtube.com/iframe_api"></script>
It's actually quite simple.
//First some helper functions
function getElement(selector) {
return document.querySelector(selector);
}
function show(selector) {
getElement(selector).classList.remove('is-hidden');
}
//Actual code to show the button
setTimeout(function(){
show('#my-button');
},30000);
The CSS for the is-hidden class
.is-hidden {
display: none;
}
@Tray2 but i don't think this is tracking the watch minute, because I only want it to display if user has watch 30 seconds of the video
Please or to participate in this conversation.