quatuorbellefeuille.com

commit e3646ce5ac73996a7ddaa63633f73be678dcb9f3
parent 2af97b95eb3eaa061b783d0aad02cb97d707b0a4
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Sun, 13 Dec 2020 16:53:21 +0100

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

Diffstat:
M
gallerie.css
 | 
28
+++++++++++++++++++++++-----
M
gallerie.html
 | 
24
+++++++++++++++++++++++-

2 files changed, 46 insertions(+), 6 deletions(-)
diff --git 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%;
+}
diff --git a/gallerie.html b/gallerie.html
@@ -34,7 +34,7 @@
 
     <main>
         <h1>Photos</h1>
-        <div class="photos">
+        <div class="mosaic photos">
           <div class="photo">
             <a href="https://v3.goldensun-world.com/img/wallpapers/wallpaper1.jpg">
               <img src="https://v3.goldensun-world.com/img/wallpapers/wallpaper1_800x600.jpg">
@@ -57,6 +57,28 @@
           </div>
         </div>
         <h1>Vidéos</h1>
+        <div class="mosaic videos">
+          <div class="video">
+            <iframe src="https://www.youtube.com/embed/rl16-7wZmFY"
+                    frameborder="0" allowfullscreen class="yt">
+            </iframe>
+          </div>
+          <div class="video">
+            <iframe src="https://www.youtube.com/embed/QpYo0lAwQ2g"
+                    frameborder="0" allowfullscreen class="yt">
+            </iframe>
+          </div>
+          <div class="video">
+            <iframe src="https://www.youtube.com/embed/1SJsDCMyU9c"
+                    frameborder="0" allowfullscreen class="yt">
+            </iframe>
+          </div>
+          <div class="video">
+            <iframe src="https://www.youtube.com/embed/9yxEPZ1vCnM"
+                    frameborder="0" allowfullscreen class="yt">
+            </iframe>
+          </div>
+        </div>
       </div>
     </main>