-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Youtube consent front-end * Focus into video after accepting tcs and cs so screenreaders can play the video * Don't focus on video unless you've just given consent, sort focus state, fix cookie in safari * update docs
- Loading branch information
Showing
14 changed files
with
229 additions
and
126 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| # Lite youtube | ||
|
|
||
| We use the https://www.npmjs.com/package/lite-youtube-embed package to avoid setting youtube cookies, along with https://theorangeone.net/projects/wagtail-lite-youtube-embed/ | ||
|
|
||
| When youtube videos are first loaded the user must accept the youtube Ts and Cs. They can opt not to show them again - this sets a cookie to hide the consent message in future. | ||
|
|
||
| This functionality is controlled by `tbx/static_src/javascript/components/youtube-embed.js`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 25 additions & 24 deletions
49
tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/embed_block.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,36 @@ | ||
| {% load static %} | ||
|
|
||
| <div class="grid__embed streamfield__embed youtube-video-container"> | ||
| {% if is_youtube %} | ||
| <div class="youtube-video-placeholder"> | ||
| {% if is_youtube %} | ||
| <div class="grid__embed streamfield__embed youtube-embed" data-youtube-embed> | ||
| <div class="youtube-embed__placeholder"> | ||
| {% if thumbnail_url %} | ||
| <img src="{{ thumbnail_url }}" alt="Video Thumbnail"> | ||
| <img src="{{ thumbnail_url }}" alt="Video Thumbnail" class="youtube-embed__thumbnail-image"> | ||
| {% else %} | ||
| {% comment %} | ||
| We need a placeholder here just in case we fail to get the thumbnail_url for some reason | ||
| {% endcomment %} | ||
| {# Fallback if we can't fetch a preview image from youtube #} | ||
| <div class="youtube-embed__fallback">{% include "patterns/atoms/icons/icon.html" with name="youtube" classname="youtube-embed__logo" %}</div> | ||
| {% endif %} | ||
| <div class="youtube-overlay"> | ||
| <div class="consent-banner">This content is hosted by a third party. By showing the external content you accept the <a href="https://www.youtube.com/t/terms" target="_blank">terms and conditions</a> of YouTube.</div> | ||
| <div class="button-container"> | ||
| <button class="consent-button"> | ||
| Proceed | ||
| {# https://tabler.io/icons/icon/player-play #} | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-player-play"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 4v16l13 -8z" /></svg> | ||
| </button> | ||
| <button class="dont-ask-again-button"> | ||
| Don't Ask Again | ||
| {# https://tabler.io/icons/icon/device-floppy #} | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-device-floppy"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" /><path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" /><path d="M14 4l0 4l-6 0l0 -4" /></svg> | ||
| </button> | ||
| <div class="youtube-embed__overlay"> | ||
| <div class="youtube-embed__consent-banner"> | ||
| <p>This content is hosted by a third party. By showing the external content you accept the <a class="youtube-embed__link" href="https://www.youtube.com/t/terms" target="_blank">terms and conditions</a> of YouTube.</p> | ||
| <div class="youtube-embed__button-container"> | ||
| <button class="button youtube-embed__button" data-youtube-consent-button> | ||
| I accept | ||
| </button> | ||
| <div class="youtube-embed__checkbox-wrapper"> | ||
| <input type="checkbox" id="youtube-consent-checkbox" data-youtube-save-prefs class="youtube-embed__checkbox"> | ||
| <label for="youtube-consent-checkbox" class="youtube-embed__label">Don't ask me again</label> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="youtube-embed" style="display: none;"> | ||
| <div class="youtube-embed__container" data-youtube-embed-container> | ||
| {{ value }} | ||
| </div> | ||
| {% else %} | ||
| </div> | ||
| {% else %} | ||
| <div class="grid__embed streamfield__embed"> | ||
| {{ value }} | ||
| {% endif %} | ||
| </div> | ||
| </div> | ||
| {% endif %} | ||
|
|
2 changes: 2 additions & 0 deletions
2
tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/embed_block.yaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,4 @@ | ||
| context: | ||
| value: <iframe width="420" height="315" src="https://www.youtube.com/embed/9ZY4QUhOb4Y"></iframe> | ||
| is_youtube: True | ||
| thumbnail_url: https://i.ytimg.com/vi/g9kZwNEHmdw/hqdefault.jpg |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.