Add YouTube nocookie embed support

[salvatore-esposito-green]

Hello,

We have been long-time users of SilentBox and truly appreciate the work done on this library. We are currently using an older version (v0.1.9) in a Nuxt 2 project, but we are interested in upgrading to newer versions (2.x or 3.x).

One feature we would like to request is support for YouTube’s nocookie embeds (e.g., https://www.youtube-nocookie.com/embed/...). This option allows for a more privacy-friendly integration by preventing cookies from being stored until users interact with the embedded video.

To achieve this, we suggest modifying two functions in the library:

1. getYoutubeVideoId Update the regex to handle youtube-nocookie.com URLs. Example modification:

export const getYoutubeVideoId = (url: string): string => {
  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?)|(youtube-nocookie\.com\/embed\/))\??v?=?([^#&?]*).*/
  const match = regExp.exec(url)
  return (match !== undefined && match !== null && match[8] !== undefined) ? match[8] : ''
}

2. getYouTubeVideoURL The logic for generating the embed URL could be adjusted to account for the youtube-nocookie.com domain. While the exact implementation could vary, one option might involve dynamically detecting the need for nocookie support based on the URL itself or some external configuration. For instance, the base domain could be switched depending on whether the input URL contains youtube-nocookie.com.
   Here’s an example of a possible approach:

const getYouTubeVideoURL = (url: string): string => {
  let videoURL = ''
  const videoId = getYoutubeVideoId(url)
  if (videoId) {
    const baseDomain = url.includes('youtube-nocookie.com') ? 'www.youtube-nocookie.com' : 'www.youtube.com'
    videoURL = `${location.protocol}//${baseDomain}/embed/${videoId}?rel=0`
    if (props.item.autoplay) videoURL += '&autoplay=1'
    if (!props.item.controls) videoURL += '&controls=0'
  }
  return videoURL
}

This would ensure compatibility with both standard YouTube URLs and nocookie URLs without necessarily introducing a new property like props.item.useNoCookie. A discussion could explore whether to rely on automatic detection or introduce a configuration option for more control.

We believe this feature would be a valuable addition to SilentBox for projects prioritizing user privacy and compliance with privacy regulations such as GDPR.

We are also willing to contribute to the implementation of this feature, whether for the 2.x or 3.x versions. If this is something you’d consider, please let us know how we can best assist or collaborate.

Looking forward to your thoughts!

Thank you,