Make YouTube Embeds GDPR compliant

[julieg18]

• adds a message about youtube's policys when a user hovers over a youtube embed.
• For our video component, I just added a message below our overlay button. For our markdown, this is done by using a custom gatsby-remark-embed transformer and inserting a js script that handles taking off the message when the user has clicked.

To Do

• Review the js implementation I used for the md embeds
• Decide if the design is good enough for a first iteration at least
• Take off the embeds's message across the site if the user has already clicked on play for one of the embeds (we can do something like this with localStorage)

[julieg18]

This script takes all of our youtube embeds and attaches a click listener to our overlay. If the overlay is clicked, the video is played and the overlay disappears. It's definitely not very "reacty"... Does anybody have any ideas on how we could improve this?

Once we agree on a implementation (whether we deside to do this one or a different way) I want to have the code update local storage so that the message won't appear again if the user revisits the site :)

[rogermparent]

Does anybody have any ideas on how we could improve this?

Bit of a shot in the dark, but is it possible to have the custom embedder return a custom tag like <youtube> and then attach a React component to our rehype-react custom components with this logic in it? That way we can use the remark-embedder style of automatic URL grabbing with React JS more consistent with the rest of the site.

[julieg18]

I could try that but wouldn't that only work for our docs pages? We'd probably want a solution that works the same for blog and doc 🤔

[rogermparent]

Good point, I forgot about our weird divergent blog markdown.

[yathomasi]

Great going @julieg18!

[rogermparent]

I absolutely love the visual design on hover! Great stuff!

I think implementation could be improved a bit by my suggestion if possible, or if not at least @yathomasi's suggestion to use a hook for setUpCustomYtEmbeds (though I'm not sure how necessary it when events are added to elements in the body as opposed to window or document).

[rogermparent]

Does anybody have any ideas on how we could improve this?

Bit of a shot in the dark, but is it possible to have the custom embedder return a custom tag like <youtube> and then attach a React component to our rehype-react custom components with this logic in it? That way we can use the remark-embedder style of automatic URL grabbing with React JS more consistent with the rest of the site.

[julieg18]

Updated the code based on everyone's comments and implemented localStorage! Once you click on a youtube embed (whether it's on the markdown or Video component), you won't see the message again on that browser.

[yathomasi]

The implementation looks great.
Just a small thing I noticed on anchor links on tooltips on the different on the homepage, docs, and blogs, especially on different hover states.
HomePage - links are underlined
Docs- links are not underlined and will get underlined on hover
Blogs - links are not underlined and will get gray(opacity lower) on hover

I am not sure how much difference it makes as it is just a one-time view for users. But, if we want to be consistent I think it's good how we show on HomePage (the links are differentiated with underline)

[rogermparent]

Looks good to me as well, all that's left is what @yathomasi pointed out with the overlays' links.

[julieg18]

Just a small thing I noticed on anchor links on tooltips on the different on the homepage, docs, and blogs, especially on different hover states.

Thanks for spotting that! Updated all the styles, keeping them all consistent and added a focus style.