YouTube を例にした iframe cookie 設定方法

youtube logo

YouTube のようなサードパーティコンテンツプロバイダーから iframes に読み込まれたウェブサイトのコンテンツが Cookie をセットし、サイト訪問者の事前同意を求めることがあります。

iframeコンテンツがサイトにとって必要不可欠な機能である場合は、iframeで使用のcookieを必須カテゴリとして扱うことで、ユーザーの同意状況に関係なく表示することが可能です。詳しくは以下のブログを参照ください。
Cookiebotを使ったWEB上でEmbedしたYouTube動画を確実に表示できるようにする

サイト訪問者が同意するまで Cookie の収集をしないために、サイト訪問者が同意するまでビデオを読み込まないように設定することができます。サイト訪問者が既に同意を提出したページリクエスト上に、サイト訪問者の同意状態に応じて自動的に iframe コンテンツが読み込まれます。

事前同意を導入するためには、オリジナルの iframe タグを変更します。

オリジナル:

<iframe src="https://www.youtube.com/embed/xxxxxxxxxxx" frameborder="0" allowfullscreen></iframe>

変更後:(’src’ を ‘data-src’ に名称変更し、data-cookieconsent-attribute をタグに適用)

<iframe 
data-src
="https://www.youtube.com/embed/xxxxxxxxxxx" 
data-cookieconsent="marketing"
 frameborder="0" allowfullscreen></iframe>

URL 例を iframe-src の URL に置き換えてください。

YouTube は HTTP cookie を設定していない大体ドメインである www.youtube-nocookie.com からビデオを提供しています。

同意のない場合にメッセージを表示

iframe タグの前後にプレースホルダーを追加し、サイト訪問者が iframe で使用されている Cookie のタイプに同意していない場合に、サイト訪問者に対してメッセージを表示することができます。

例:

<div class="cookieconsent-optout-marketing">
Please <a href="javascript:Cookiebot.renew()">accept marketing-cookies</a> to watch this video.
</div>

サイト訪問者が同意した後、メッセージは非表示になります。

原文:Iframe cookie consent with YouTube example