From 5aad2cb5769383c167b70688382cd5d4b321bfd4 Mon Sep 17 00:00:00 2001 From: Kaj Forney Date: Thu, 23 Feb 2023 12:35:26 -0700 Subject: [PATCH] Only load YouTube iframes when actually clicked on. --- css/main.css | 71 +++++++++++++++++++++++++++++++++++++++------------- index.html | 67 +++++++++++++++++++++++++++++++++++-------------- 2 files changed, 102 insertions(+), 36 deletions(-) diff --git a/css/main.css b/css/main.css index 6b123ae..8d58a48 100644 --- a/css/main.css +++ b/css/main.css @@ -149,14 +149,6 @@ hr { margin-right: auto; } -iframe[src*=youtube] { - text-align: center; - display: block; - margin-right: auto; - margin-left: auto; - max-width: 80%; -} - iframe[src*=itch] { text-align: center; display: block; @@ -261,22 +253,67 @@ iframe[src*=itch] { text-shadow: #78a1bb 3px 3px 3px; } -.youtube-container { +/*Code for YouTube CSS is originally from https://stackoverflow.com/questions/50410828/how-to-prevent-youtube-js-calls-from-slowing-down-page-load +and was then modified by me as necessary.*/ + +.youtube-video { + background-color: #000; + margin-bottom: 30px; position: relative; + padding-top: 56.25%; overflow: hidden; - width: 100%; - padding-top: 50.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ + cursor: pointer; + border-radius: 40px; } -.youtube-iframe { +.youtube-video img { + width: 100%; + top: 0%; + left: 0; + opacity: 0.7; +} + +.youtube-video .playButton { + width: 90px; + height: 60px; + background-color: #333; + box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); + z-index: 1; + opacity: 0.8; + border-radius: 6px; +} + +.youtube-video .playButton:before { + content: ""; + border-style: solid; + border-width: 15px 0 15px 26.0px; + border-color: transparent transparent transparent #fff; +} + +.youtube-video img, +.youtube-video .playButton { + cursor: pointer; +} + +.youtube-video img, +.youtube-video iframe, +.youtube-video .playButton, +.youtube-video .playButton:before { position: absolute; +} + +.youtube-video .playButton, +.youtube-video .playButton:before { + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); +} + +.youtube-video iframe { + height: 100%; + width: 100%; top: 0; left: 0; - bottom: 0; - right: 0; - width: 100%; - height: 100%; - border-radius: 40px; } .fa-brands { diff --git a/index.html b/index.html index 0e22c90..83377aa 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Kaj Forney -- Portfolio - + @@ -116,11 +116,10 @@
-
- +
+
+
+
@@ -195,12 +194,15 @@
-
- + allowfullscreen loading="lazy">-->
@@ -329,19 +331,13 @@
-
- +
+
-
- +
+
@@ -435,9 +431,42 @@ crossorigin="anonymous" defer> + +