From e3646ce5ac73996a7ddaa63633f73be678dcb9f3 Mon Sep 17 00:00:00 2001
From: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Sun, 13 Dec 2020 16:53:21 +0100
Subject: 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
---
 gallerie.html | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

(limited to 'gallerie.html')

diff --git a/gallerie.html b/gallerie.html
index eeceeaf..9deb2c4 100644
--- 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>
 
-- 
cgit v1.2.3