Add YouTube videos

padding-bottom trick courtesy of Nick Vogt.

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

1 files changed, 23 insertions, 5 deletions

diff --git a/gallerie.css b/gallerie.css
index 6706c28..face887 100644
--- a/gallerie.css
+++ b/gallerie.css
@@ -6,14 +6,17 @@ main > div {
     overflow: auto;
 }
 
-.photos {
+.mosaic {
     display: grid;
-    grid-auto-rows: 14em;
-    grid-template-columns: repeat(auto-fit, 40%);
+    grid-template-columns: repeat(auto-fit, 30em);
     grid-gap: 0.8em;
 }
 
-.photo img {
+.mosaic.photos {
+    grid-auto-rows: 14em;
+}
+
+.mosaic img {
     object-position: center;
     object-fit: cover;
     height: 100%;
@@ -22,6 +25,21 @@ main > div {
     filter: grayscale(0.8) brightness(0.4);
 }
 
-.photo img:hover {
+.mosaic img:hover {
     filter: none;
 }
+
+.mosaic .video {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-bottom: 56.25%;           /* 9/16 */
+}
+
+.mosaic .video .yt {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}