Research

1. Both youtube and vimeo add a shitload of scripts to the page. If you just include their embed iframe as-is you site will be much slower guaranteed

2. Youtube has a nocookie mode and yet as soon as you add a youtube video it adds a shitload of tracking. They just use local storage instead https://stackoverflow.com/questions/61887699/gdpr-youtube-nocookie-embedded-urls-need-visitors-permission

3. To load any of them efficiently I used an Image component with a play button on it. Once it is clicked I render the video in autoplay mode so that user doesn't have to click twice.

4. There are a bunch of other options to customize the players that would require user to read their documentation

5. Vimeo is apparently GDPR compliant, so it doesn't need a banner.

6. Background mode is possible

   • All player toggles and elements will be turned off (including the play/pause button!)
   • The video will automatically loop.
   • The video will be set to autoplay.
   • The video will be muted.

   But will insert all scripts for the video player on the page, so again we need a "lazy" option to avoid affecting page speed

7. If somebody uses Youtube video, they need a gdpr consent dialog.

8. We could have a consent dialog component as a component user can add to the page with built-in functionality
   we could have it added by the user inside video component so that it shows up first time only when a user clicks on the image to play a video, since before that, there is no tracking (if we do it the way I describe) and hence no need for consent.

Generally I think local-specific consent for something when it's actually used is better for many many cases, especially with youtube.

Lite versions for embedding:

• https://github.com/slightlyoff/lite-vimeo/
• https://github.com/paulirish/lite-youtube-embed/

Both do:

• show image, only load player on click
• on hover preconnect

Vimeo embed API https://developer.vimeo.com/player/sdk/basics
Youtube embed API https://developers.google.com/youtube/iframe_api_reference

Todo Vimeo

• Vimeo component
• Parse vimeo url to get the video id required for js api
• Create a default placeholder tree that is visible initially and can be changed by the user
• Handle click on the instance root to load the player and autoplay
• Remove children once player is loaded and starts playing to avoid jumps
• Expose supported settings over properties
• Preconnect ssl on hover
• Handle url parsing errors
• render vimeo preview image
• color control - depends on Props panel: Color control #1154
• base64 image source should show control just like asset - When Image source has some text - Choose Source button deactivation is not-intuitive #1721
• url prop type
• fix vimeo icon color
• check accessibility
• final design of the default preview
• simplify Portrait, Title, and Byline
• add loading indication after initialization click