diff --git a/css/_video.scss b/css/_video.scss index 5798b03e0..5539845aa 100644 --- 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; + } +} \ No newline at end of file diff --git a/js/main.js b/js/main.js index 5f49bcf89..a5f76165a 100644 --- 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; + }); + }); }); \ No newline at end of file diff --git a/templates/schedule/historic/item.html b/templates/schedule/historic/item.html index 4a385901a..2e471bf5a 100644 --- a/templates/schedule/historic/item.html +++ b/templates/schedule/historic/item.html @@ -49,9 +49,17 @@
View this video on the Internet Archive.
{% elif event.video.youtube %} - +This video is hosted on YouTube. To load the video, you'll need to agree to YouTube's privacy policy.
+ +View this video on YouTube.
{% endif %}