Add click-to-load functionality for historic YouTube videos.

see e.g. /schedule/2014/176-a-brief-guide-to-dog-behaviour-and-human-interaction Fixes #1298.
emfcamp · Jan 28, 2024 · cbb8a51 · cbb8a51
1 parent 7e84dcb
commit cbb8a51
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 9 deletions.
diff --git a/css/_video.scss b/css/_video.scss
@@ -6,12 +6,40 @@
   height: 0;
   margin-bottom: 15px;
   padding-bottom: (math.div(100%, 16) * 9);
+
+  iframe,
+  .content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 }
 
-.video-container iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+.youtube-wait-for-click {
+  &:not(.youtube-wait-for-click-has-js) {
+    display: none;
+  }
 }
+
+.youtube-wait-for-click-content {
+  background-color: #1e1e1e;
+  color: #c8c8c8;
+  text-align: center;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  a {
+    color: #c8c8c8;
+  }
+
+  .youtube-wait-for-click-button {
+    background-color: #1e1e1e;
+    color: #c8c8c8;
+    border: 2px solid #c8c8c8;
+    margin: 0 auto;
+  }
+}
diff --git a/js/main.js b/js/main.js
@@ -115,4 +115,14 @@ $(() => {
 
   $('#user_content_form #type').on('change', displayWorkshopFieldsIfRequired);
   displayWorkshopFieldsIfRequired();
+});
+
+$(() => {
+  document.querySelectorAll('.youtube-wait-for-click').forEach((parentEl) => {
+    parentEl.classList.add('youtube-wait-for-click-has-js');
+    parentEl.querySelector('.youtube-wait-for-click-button').addEventListener('click', () => {
+      parentEl.replaceChildren(parentEl.querySelector('template').content.cloneNode(true));
+      return false;
+    });
+  });
 });
diff --git a/templates/schedule/historic/item.html b/templates/schedule/historic/item.html
@@ -49,9 +49,17 @@ <h3>Video</h3>
         mozallowfullscreen="true" allowfullscreen></iframe>
       <p>View this video <a href="{{ event.video.archiveorg }}">on the Internet Archive</a>.</p>
     {% elif event.video.youtube %}
-      <iframe src="{{event.video.youtube|replace('youtube.com/watch?v=', 'youtube.com/embed/')}}"
-          width="100%" height="500px" frameborder="0" 
-          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+      <div class="youtube-wait-for-click video-container">
+        <template>
+          <iframe src="{{event.video.youtube|replace('youtube.com/watch?v=', 'youtube.com/embed/')}}"
+              width="100%" height="500px" frameborder="0" 
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+        </template>
+        <div class="youtube-wait-for-click-content content">
+          <p>This video is hosted on YouTube. To load the video, you'll need to agree to YouTube's <a href="https://www.youtube.com/t/privacy">privacy policy</a>.</p>
+          <button class="youtube-wait-for-click-button">Continue</button>
+        </div>
+      </div>
       <p>View this video <a href="{{ event.video.youtube }}">on YouTube</a>.</p>
     {% endif %}
   </div>