iframe（ビデオプレーヤーなど）を同意が得られた場合のみロードする
あなたのウェブサイトには動画があるとします。おそらくVimeoやYoutubeを介してロードされます。Vimeoはほとんど広告のためにあなたのビデオを使用しませんが、同意を得るまでロードしないようにブロックする方が安全かもしれません。このチュートリアルでは、Youtubeのビデオを設定し、マーケティングCookieのための同意が与えられたときにのみロードします。
Youtubeはiframe上で読み込まれます（このチュートリアルはすべてのiframeコンテンツに使用できます）。
- 使用したい動画のURLが必要です。例えばこのヨーヨー・マのクラシック音楽。https://www.youtube.com/embed/1prweT95Mo0
- Youtube、Vimeoまたは他のiframeソースから取得する埋め込みコードを変更する必要があります。「src=」の部分を「data-src=」に変更し、動画を読み込むために同意が必要なCookieのカテゴリも追加する必要があります: data-cookiefirst-category=”functional” もしくは advertising （Youtubeなどをご利用の場合）を追加してください。
- iframeの前後にボタンを設置して許諾を取得したい場合は、iframeのコンテンツを読み込むために必要なCookieのカテゴリをオンクリックで受け入れることができます。
- ご覧の通り、iframeはまだ読み込まれており、ウェブサイト上でスペースを取っています。このカスタムCSSをページに追加することで、非表示にすることができます。
iframe:not([src]) {
display: none;
}
「このビデオをロードするためにマーケティングCookieを受け入れる」ボタンを表示するコード例です。クリックすると、動画がロードされます。
<iframe width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen" data-src="https://www.youtube.com/embed/1prweT95Mo0" data-cookiefirst-category="advertising"></iframe>
<div class="cookiefirst-disabled-resource">
Please <button onclick="CookieFirst.acceptCategory('advertising')">Accept marketing cookies</button> to watch this video.
</div>
