Skip to content

YT modal gdpr fix #2994

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 2 commits into from
Sep 3, 2025
Merged

YT modal gdpr fix #2994

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
de071f7
youtube modal fix
bernardhanna Sep 3, 2025
6cd3eb0
Merge pull request #2993 from codeeu/2-sept-imports
bernardhanna Sep 3, 2025
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
149 changes: 73 additions & 76 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 @@ -18,95 +18,92 @@ class="block bg-[#FFD700] hover:bg-[#F95C22] rounded-full p-4 duration-300">
<div class="flex overflow-hidden flex-col flex-grow flex-shrink justify-center w-full max-h-full">
@if ($src && Str::contains($src, ['youtube.com', 'youtu.be']))
@php
// Extract video ID and convert to privacy-enhanced URL
preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/', $src, $matches);
$videoId = $matches[1] ?? '';
$privacyEnhancedUrl = "https://www.youtube-nocookie.com/embed/{$videoId}";
// Use privacy-enhanced YouTube URL
$privacyEnhancedUrl = "https://www.youtube-nocookie.com/embed/{$videoId}?rel=0&modestbranding=1";
@endphp

<div id="youtube-container-{{ $id }}" class="w-full h-full">
<!-- 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 }}()"
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 }}(); return false;" class="underline">accept marketing cookies</a></p>
</div>
<!-- This will be replaced when video loads -->
</div>

<script>
(function() {
let videoLoaded{{ str_replace('-', '_', $id) }} = false;

function checkConsent{{ str_replace('-', '_', $id) }}() {
if (typeof CookieScript !== 'undefined' && CookieScript.instance) {
try {
const state = CookieScript.instance.currentState();
return state && (state.targeting === true || state.marketing === true);
} catch (e) {
return false;
}
}
return false;
}

function loadVideo{{ str_replace('-', '_', $id) }}() {
if (videoLoaded{{ str_replace('-', '_', $id) }}) return;

const container = document.getElementById('youtube-container-{{ $id }}');
if (container) {
container.innerHTML = `
<iframe class="w-full h-full"
src="{{ $privacyEnhancedUrl }}"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
`;
videoLoaded{{ str_replace('-', '_', $id) }} = true;
}
}

function showPlaceholder{{ str_replace('-', '_', $id) }}() {
const container = document.getElementById('youtube-container-{{ $id }}');
if (container && !videoLoaded{{ str_replace('-', '_', $id) }}) {
container.innerHTML = `
<div class="flex flex-col justify-center items-center p-6 w-full h-full bg-gray-100 rounded-lg">
<svg class="mb-4 w-20 h-20" 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="mb-4 text-center text-gray-700">This video requires consent to load as it will share data with YouTube/Google.</p>
<button onclick="loadVideo{{ str_replace('-', '_', $id) }}()"
class="bg-[#f95c22] text-white px-6 py-3 rounded-lg hover:bg-[#e54c12] transition font-semibold">
Load Video Anyway
</button>
</div>
`;
}
}

// Check when modal opens
const showButton = document.querySelector('[data-targetId="video-modal-{{ $id }}"]');
if (showButton) {
showButton.addEventListener('click', function() {
setTimeout(function() {
if (checkConsent{{ str_replace('-', '_', $id) }}()) {
loadVideo{{ str_replace('-', '_', $id) }}();
} else {
showPlaceholder{{ str_replace('-', '_', $id) }}();
}
}, 100);
});
}

// Make functions globally available
window.loadVideo{{ str_replace('-', '_', $id) }} = loadVideo{{ str_replace('-', '_', $id) }};
})();
</script>
@else
<video id="video" class="max-w-full max-h-full" controls src="{{ $src }}">
<source src="{{ $src }}" type="video/mp4">
</video>
@endif
</div>
</div>

<script>
// 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 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>
`;
}
}

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 && (state.targeting === true || state.marketing === true)) {
clearInterval(checkInterval);
loadYouTubeVideo_{{ $id }}();
}
}, 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
</div>
Loading