Skip to content

youtube modal fix #2991

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 3, 2025
Merged

youtube modal fix #2991

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 59 additions & 31 deletions resources/views/layout/video-player.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,20 @@ class="block bg-[#FFD700] hover:bg-[#F95C22] rounded-full p-4 duration-300">
@endphp

<div id="youtube-container-{{ $id }}" class="w-full h-full">
<!-- Placeholder until consent -->
<div class="flex flex-col justify-center items-center w-full h-full bg-gray-100 rounded-lg youtube-consent-placeholder">
<img src="/images/youtube-logo.svg" class="mb-4 w-20 h-20 opacity-50" alt="YouTube">
<!-- Placeholder until consent - will be replaced if cookies accepted -->
<div id="youtube-placeholder-{{ $id }}" class="flex flex-col justify-center items-center w-full h-full bg-gray-100 rounded-lg youtube-consent-placeholder">
<!-- YouTube Play Button SVG -->
<svg class="mb-4 w-20 h-20 opacity-50" viewBox="0 0 68 48" fill="#FF0000">
<path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"/>
<path fill="#FFFFFF" d="M45,24L27,14v20L45,24z"/>
</svg>
<p class="px-4 mb-4 text-center">This video is hosted on YouTube. Loading it will share data with Google.</p>
<button onclick="loadYouTubeVideo('{{ $id }}', '{{ $privacyEnhancedUrl }}')"
<button onclick="loadYouTubeVideo_{{ $id }}()"
class="bg-[#f95c22] text-white px-6 py-3 rounded-lg hover:bg-[#e54c12] transition">
Load Video
</button>
<p class="mt-2 text-sm text-gray-600">or <a href="#" onclick="acceptMarketingAndLoad('{{ $id }}', '{{ $privacyEnhancedUrl }}'); return false;" class="underline">accept marketing cookies</a></p>
<p class="mt-2 text-sm text-gray-600">or <a href="#" onclick="acceptMarketingAndLoad_{{ $id }}(); return false;" class="underline">accept marketing cookies</a></p>
</div>
<!-- Iframe will be inserted here after consent -->
</div>
@else
<video id="video" class="max-w-full max-h-full" controls src="{{ $src }}">
Expand All @@ -46,38 +49,63 @@ class="bg-[#f95c22] text-white px-6 py-3 rounded-lg hover:bg-[#e54c12] transitio
</div>

<script>
function loadYouTubeVideo(id, url) {
const container = document.getElementById('youtube-container-' + id);
container.innerHTML = `
<iframe class="w-full h-full"
src="${url}?rel=0&modestbranding=1"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
`;
// Check on modal open if cookies are already accepted
document.getElementById('video-modal-trigger-show').addEventListener('click', function() {
setTimeout(function() {
checkAndLoadYouTube_{{ $id }}();
}, 100);
});

function checkAndLoadYouTube_{{ $id }}() {
if (typeof CookieScript !== 'undefined' && CookieScript.instance) {
try {
const state = CookieScript.instance.currentState();
// Check if marketing/targeting cookies are accepted
if (state && (state.targeting === true || state.marketing === true)) {
loadYouTubeVideo_{{ $id }}();
}
} catch (e) {
console.log('Could not check cookie state:', e);
}
}
}

function acceptMarketingAndLoad(id, url) {
// Request marketing consent first
if (typeof CookieScript !== 'undefined') {
CookieScript.instance.acceptCategory('targeting');
loadYouTubeVideo(id, url);
} else {
loadYouTubeVideo(id, url);
function loadYouTubeVideo_{{ $id }}() {
const container = document.getElementById('youtube-container-{{ $id }}');
if (container) {
container.innerHTML = `
<iframe class="w-full h-full"
src="{{ $privacyEnhancedUrl }}?rel=0&modestbranding=1"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
`;
}
}

// Auto-load if marketing cookies already accepted
document.addEventListener('DOMContentLoaded', function() {
@if ($src && Str::contains($src, ['youtube.com', 'youtu.be']))
if (typeof CookieScript !== 'undefined') {
function acceptMarketingAndLoad_{{ $id }}() {
if (typeof CookieScript !== 'undefined' && CookieScript.instance) {
// Show the cookie banner for the user to accept marketing
CookieScript.instance.show();

// Listen for changes in consent
let checkInterval = setInterval(function() {
const state = CookieScript.instance.currentState();
if (state.targeting || state.marketing) {
loadYouTubeVideo('{{ $id }}', '{{ $privacyEnhancedUrl }}');
if (state && (state.targeting === true || state.marketing === true)) {
clearInterval(checkInterval);
loadYouTubeVideo_{{ $id }}();
}
}
@endif
});
}, 500);

// Stop checking after 30 seconds
setTimeout(function() {
clearInterval(checkInterval);
}, 30000);
} else {
// Fallback: just load the video if CookieScript isn't available
loadYouTubeVideo_{{ $id }}();
}
}
</script>
@endpush
@endif
Expand Down