Make YouTube Embeds GDPR compliant

config/gatsby-remark-embedder/custom-yt-embedder.js

@@ -0,0 +1,59 @@
+const shouldTransform = url => {
+  const { host, pathname, searchParams } = new URL(url)
+
+  return (
+    host === 'youtu.be' ||
+    (['youtube.com', 'www.youtube.com'].includes(host) &&
+      pathname.includes('/watch') &&
+      Boolean(searchParams.get('v')))
+  )
+}
+
+const getTimeValueInSeconds = timeValue => {
+  if (Number(timeValue).toString() === timeValue) {
+    return timeValue
+  }
+
+  const {
+    2: hours = '0',
+    4: minutes = '0',
+    6: seconds = '0'
+  } = timeValue.match(/((\d*)h)?((\d*)m)?((\d*)s)?/)
+
+  return String((Number(hours) * 60 + Number(minutes)) * 60 + Number(seconds))
+}
+
+const getYouTubeIFrameSrc = urlString => {
+  const url = new URL(urlString)
+  const id =
+    url.host === 'youtu.be' ? url.pathname.slice(1) : url.searchParams.get('v')
+
+  const embedUrl = new URL(
+    `https://www.youtube-nocookie.com/embed/${id}?rel=0&controls=0&showinfo=0;`
+  )
+
+  url.searchParams.forEach((value, name) => {
+    if (name === 'v') {
+      return
+    }
+
+    if (name === 't') {
+      embedUrl.searchParams.append('start', getTimeValueInSeconds(value))
+    } else {
+      embedUrl.searchParams.append(name, value)
+    }
+  })
+  return embedUrl.toString()
+}
+
+// all code above taken from gatsby-remark-embedder (https://github.com/MichaelDeBoey/gatsby-remark-embedder)
+
+const name = 'YouTubeCustom'
+
+const getHTML = url => {
+  const iframeSrc = getYouTubeIFrameSrc(url)
+
+  return `<div class="yt-embed-wrapper"><iframe width="100%" height="315" src="${iframeSrc}" frameBorder="0" allow="autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe><div className="yt-embed-wrapper__overlay"><span class="yt-embed-wrapper__tooltip">By clicking play, you agree to YouTube&apos;s <a href="https://policies.google.com/u/3/privacy?hl=en">Privacy Policy</a> and <a href="https://www.youtube.com/static?template=terms">Terms of Service</a></span></div></div>`
+}
+
+module.exports = { getHTML, name, shouldTransform }

gatsby-config.js

@@ -7,6 +7,7 @@ require('./config/prismjs/dvc')
 require('./config/prismjs/usage')
 require('./config/prismjs/dvctable')
 
+const customYoutubeTransformer = require('./config/gatsby-remark-embedder/custom-yt-embedder')
 const apiMiddleware = require('./src/server/middleware/api')
 const redirectsMiddleware = require('./src/server/middleware/redirects')
 const makeFeedHtml = require('./plugins/utils/makeFeedHtml')
@@ -70,7 +71,12 @@ const plugins = [
     resolve: 'gatsby-transformer-remark',
     options: {
       plugins: [
-        'gatsby-remark-embedder',
+        {
+          resolve: 'gatsby-remark-embedder',
+          options: {
+            customTransformers: [customYoutubeTransformer]
+          }
+        },
         'gatsby-remark-dvc-linker',
         {
           resolve: 'gatsby-remark-args-linker',

plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Main/index.tsx

@@ -5,6 +5,7 @@ import { navigate } from '@reach/router'
 import Link from '../../../Link'
 import Tutorials from '../../TutorialsLinks'
 import { getPathWithSource } from '../../../../utils/shared/sidebar'
+import setUpCustomYtEmbeds from '../../../..//utils/front/setUpCustomYtEmbeds'
 
 import 'github-markdown-css/github-markdown-light.css'
 import * as sharedStyles from '../../styles.module.css'
@@ -64,6 +65,8 @@ const Main: React.FC<IMainProps> = ({
   }, [])
 
   useEffect(() => {
+    setUpCustomYtEmbeds()
+
     document.addEventListener('touchstart', onTouchStart, false)
     document.addEventListener('touchend', onTouchEnd, false)
 

plugins/gatsby-theme-iterative-docs/src/components/Documentation/Markdown/Main/styles.module.css

@@ -273,6 +273,53 @@
     margin-left: 20px;
     margin-right: 10px;
   }
+
+  .yt-embed-wrapper {
+    position: relative;
+    display: flex;
+
+    &:hover &__tooltip {
+      opacity: 1;
+    }
+
+    &__overlay {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: flex-end;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    &__tooltip {
+      padding: 10px;
+      box-sizing: border-box;
+      color: #fff;
+      opacity: 0;
+      width: 100%;
+      font-size: 16px;
+      background-color: rgb(23 23 23 / 59%);
+      text-shadow: 0 1px 0 rgb(33 45 69 / 25%);
+      transition: opacity 0.2s ease-in-out;
+
+      a {
+        color: #fff;
+
+        &::after {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
 .content {

plugins/gatsby-theme-iterative-docs/src/utils/front/setUpCustomYtEmbeds.ts

@@ -0,0 +1,16 @@
+const setUpCustomYtEmbeds = () => {
+  const ytEmbeds = document.querySelectorAll('.yt-embed-wrapper')
+  ytEmbeds.forEach(embed => {
+    const iframe = embed.querySelector('iframe')
+    const overlay = embed.querySelector('.yt-embed-wrapper__overlay')
+
+    overlay?.addEventListener('click', () => {
+      if (iframe && iframe.src) {
+        iframe.src = iframe?.src + `&autoplay=1`
+      }
+      overlay.classList.add('hidden')
+    })
+  })
+}
+
+export default setUpCustomYtEmbeds

src/components/Blog/Post/Markdown/styles.module.css

@@ -564,4 +564,53 @@
       border-bottom: none;
     }
   }
+
+  :global {
+    .yt-embed-wrapper {
+      position: relative;
+      display: flex;
+
+      &:hover &__tooltip {
+        opacity: 1;
+      }
+
+      &__overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: flex-end;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        &.hidden {
+          display: none;
+        }
+      }
+
+      &__tooltip {
+        padding: 10px;
+        box-sizing: border-box;
+        color: #fff;
+        opacity: 0;
+        width: 100%;
+        font-size: 16px;
+        background-color: rgb(23 23 23 / 59%);
+        text-shadow: 0 1px 0 rgb(33 45 69 / 25%);
+        transition: opacity 0.2s ease-in-out;
+
+        a {
+          color: #fff;
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+  }
 }

src/components/Blog/Post/index.tsx

@@ -1,13 +1,14 @@
 import cn from 'classnames'
 
-import React, { useMemo, useRef } from 'react'
+import React, { useMemo, useRef, useEffect } from 'react'
 import { useWindowScroll, useWindowSize } from 'react-use'
 
 import { IBlogPostData } from '../../../templates/blog-post'
 
 import { useCommentsCount } from 'gatsby-theme-iterative-docs/src/utils/front/api'
 import { pluralizeComments } from 'gatsby-theme-iterative-docs/src/utils/front/i18n'
 import tagToSlug from 'gatsby-theme-iterative-docs/src/utils/shared/tagToSlug'
+import setUpCustomYtEmbeds from 'gatsby-theme-iterative-docs/src/utils/front/setUpCustomYtEmbeds'
 
 import Markdown from './Markdown'
 import FeedMeta from '../FeedMeta'
@@ -38,6 +39,10 @@ const Post: React.FC<IBlogPostData> = ({
   const { width, height } = useWindowSize()
   const { y } = useWindowScroll()
 
+  useEffect(() => {
+    setUpCustomYtEmbeds()
+  }, [])
+
   const isFixed = useMemo(() => {
     if (!wrapperRef.current) {
       return false

src/components/Home/UseCases/Video/index.tsx

@@ -3,6 +3,8 @@ import React, { useState, useCallback } from 'react'
 import TwoRowsButton from '../../../TwoRowsButton'
 import { logEvent } from 'gatsby-theme-iterative-docs/src/utils/front/plausible'
 
+import Link from 'gatsby-theme-iterative-docs/src/components/Link'
+
 import * as styles from './styles.module.css'
 
 const Video: React.FC<{ id: string }> = ({ id }) => {
@@ -18,19 +20,32 @@ const Video: React.FC<{ id: string }> = ({ id }) => {
       <div className={styles.handler}>
         {!isWatching && (
           <div className={styles.overlay}>
-            <TwoRowsButton
-              mode="azure"
-              title="Watch video"
-              description="How it works"
-              icon={
-                <img
-                  className={styles.buttonIcon}
-                  src="/img/watch_white.svg"
-                  alt="Watch video"
-                />
-              }
-              onClick={watchVideo}
-            />
+            <div className={styles.content}>
+              <TwoRowsButton
+                mode="azure"
+                title="Watch video"
+                description="How it works"
+                className={styles.button}
+                icon={
+                  <img
+                    className={styles.buttonIcon}
+                    src="/img/watch_white.svg"
+                    alt="Watch video"
+                  />
+                }
+                onClick={watchVideo}
+              />
+              <div className={styles.tooltip}>
+                By clicking play, you agree to YouTube&apos;s{' '}
+                <Link href="https://policies.google.com/u/3/privacy?hl=en">
+                  Privacy Policy
+                </Link>{' '}
+                and{' '}
+                <Link href="https://www.youtube.com/static?template=terms">
+                  Terms of Service
+                </Link>
+              </div>
+            </div>
           </div>
         )}
         <iframe

src/components/Home/UseCases/Video/styles.module.css

@@ -40,7 +40,34 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
   background-color: rgb(23 23 23 / 59%);
+
+  .content {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: calc(50% - 30px);
+
+    &:hover .tooltip {
+      opacity: 1;
+    }
+  }
+
+  .tooltip {
+    margin: 16px 0;
+    opacity: 0;
+    color: #fff;
+    transition: opacity ease-in-out 0.2s;
+    text-shadow: 0 1px 0 rgb(33 45 69 / 25%);
+
+    a {
+      color: #fff;
+    }
+  }
 }
 
 .buttonIcon {