Youtube consent - front-end

[helenb]

Link to Ticket

Description of Changes Made

• As requested by Ben, use a checkbox to remember preferences for the future, rather than a button
• Tidy up JS
• Styling
• Fallback if the thumbnail is not fetched
• Make buttons transparent by default (Ben request)

How to Test

This page has a video you can test on: http://localhost:8000/blog/charity-seo-what-you-need-to-know-right-now/
Pattern library (without consent behaviour): http://localhost:8000/pattern-library/pattern/patterns/molecules/streamfield/blocks/embed_block.html

Screenshots

Expand to see more

MR Checklist

• Add a description of your pull request and instructions for the reviewer to verify your work.
• If your pull request is for a specific ticket, link to it in the description.
• Stay on point and keep it small so the merge request can be easily reviewed.
• Tests and linting passes.

Unit tests

• Added
• Not required

Documentation

• Updated build docs
• Updated editor guidelines (https://docs.google.com/document/d/1PAWccdQ4tfaZsrEWmpDhvP3GH5RRmBOARFVp4b-kje8/edit?usp=sharing)
• Not required

Browser testing

• I have tested in the following browsers and environments (edit the list as required)
  • Latest version of Chrome on mac
  • Latest version of Firefox on mac
  • Latest version of Safari on mac
  • Safari on last two versions of iOS
  • Chrome on last two versions of Android
• Not required

Data protection

• Not relevant
• This adds new sources of PII and documents it and modifies Birdbath processors accordingly

Accessibility

• Automated WCAG 2.1 tests pass
• HTML validation passes
• Manual WCAG 2.1 tests completed
• I have tested in a screen reader
• I have tested in high-contrast mode
• Any animations removed for prefers-reduced-motion
• Not required

Sustainability

• Images are optimised and lazy-loading used where appropriate
• SVGs have been optimised
• Perfomance and transfer of data considered
• If JavaScript is needed alternatives have been considered
• Not required

Pattern library

• The pattern library component for this template displays correctly, and does not break parent templates
• The styleguide is updated if relevant
• Changes are not relevant the pattern library

[chris-lawton]

Thanks Helen, the code all looks good to me and working as expected locally.

I'm sure it's been through a discussion with Ben but it wasn't immediately obvious to me that it's a video - I think it's the lack of big red play button. Might just be me though not being used to it : )

[helenb]

Thanks Helen, the code all looks good to me and working as expected locally.

I'm sure it's been through a discussion with Ben but it wasn't immediately obvious to me that it's a video - I think it's the lack of big red play button. Might just be me though not being used to it : )

Thanks @chris-lawton - useful feedback. I'll get it on staging for Ben to consider.