Согласие на использование файлов cookie для вставленных видео на YouTube с использованием JavaScript для соответствия GDPR
Из-за закона GDPR, нам кажется, что нам нужно согласие пользователя даже для видео на YouTube, размещенных на нашем сайте, что аналогично тому, что мы должны делать для Google Analytics.
Я искал через, но мог найти способы много помочь в сети или плагин, который может получить согласие пользователя для видео YouTube.
Мы можем использовать www.youtube-nocookie.com вставлять видео, которые не устанавливают файлы cookie http. Вместо этого альтернативный домен устанавливает постоянные "супер-куки" в браузере HTML Locale Storage, что также требует согласия.
Я наткнулся на один веб-сайт, который требовал согласия пользователя перед воспроизведением видео на YouTube, но я не уверен, как они это делают.
еще один пример, который показывает обход, ниже, но это не показывает работающий пример https://cybot.uservoice.com/knowledgebase/articles/614733-iframe-cookie-consent-with-youtube-example
1 ответ
Возможно, что-то изменилось через эти 3 года, но файлы cookie для YouTube не устанавливаются, пока пользователь не запустит видео. Для этого вы можете использовать API YouTube, чтобы предотвратить воспроизведение видео, пока пользователь не установит файлы cookie.
https://developer.google.com/youtube/iframe_api_reference
Вы также можете использовать jQuery для предотвращения воспроизведения видео до тех пор, пока пользователь не примет файлы cookie. Имейте в виду, что на вашем сайте может быть ошибка javascript;) и в этом случае вы не будете соблюдать GDPR.
Вот пример, в котором сообщение, запрещающее воспроизведение видео, будет наложено на проигрыватель YouTube (сохранение согласия пользователя в .. cookie;):
// Check if the user has not already accepted the use of cookies
if (getCookie('accept-yt-cookies') != 'yes') {
// Foreach iframe with a src attribute begining with 'https://www.youtube'
$('iframe[src^="https://www.youtube"]').each(function(){
// Wrap iframe element in a new div with a paragraph and a button
$(this).wrap('<div class="iframe-wrapper"></div>')
$iframeRequestApproval = $('<div class="iframe-request-approval"/>')
.append($('<p>You must accept our <a href="/legal">legal notice</a></p>'))
// Note that an onclick function is attached to the button here
.append($('<button>Accept</button>').click(()=>{acceptYTcookies()}))
$(this).before( $iframeRequestApproval )
})
}
// If user click on "Accept" button, this function will be called
function acceptYTcookies() {
// Remove overlays
$('.iframe-request-approval').remove()
// ...
// Write your own magic function to remember the user's choice for the next time
// You can auto play video after click with YT API..
setCookie('accept-yt-cookies', 'yes', 365) // here we save user choice for 365 day
}
// Cookies helpers
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
Структура HTML будет такой:
<div class="iframe-wrapper">
<div class="iframe-request-approval">
<p/>
<button/>
</div>
<iframe/>
</div>
CSS-оверлей:
/* Place the message over the iframe element */
.iframe-wrapper{
position:relative;
}
.iframe-request-approval{
width:560px;
height:315px;
position:absolute;
top:0;
left:0;
background:rgba(0,0,0,.95);
color:#fff;
z-index:10;
}