Add new YouTube video & fix bug on Youtube videos display

GladysAssistant · Sep 4, 2023 · 7da7a7a · 7da7a7a
1 parent 972aed2
commit 7da7a7a
Show file tree

Hide file tree

Showing 18 changed files with 58 additions and 36 deletions.
diff --git a/...cusaurus-plugin-content-blog/2021-09-30-using-node-red-with-gladys-assistant.md b/...cusaurus-plugin-content-blog/2021-09-30-using-node-red-with-gladys-assistant.md
@@ -29,8 +29,8 @@ La vidéo est sur YouTube ci-dessous, et vous trouverez à la suite les différe
 
 PS: Si vous pouviez mettre un commentaire sur la vidéo Youtube, cela a un vrai impact sur le référencement YouTube et ça permet à la chaine d'être encore plus visible sur internet. Merci d'avance !
 
-<div class="videoContainer">
-<iframe class="video" src="https://www.youtube.com/embed/bpmHzR8_S5g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+<iframe src="https://www.youtube.com/embed/bpmHzR8_S5g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 ## Lancer Node-RED

diff --git a/...urus-plugin-content-blog/2022-03-08-gladys-assistant-4-8-with-calendar-event.md b/...urus-plugin-content-blog/2022-03-08-gladys-assistant-4-8-with-calendar-event.md
@@ -17,8 +17,8 @@ Cette version met l'accent sur les calendriers, mais il y a d'autres améliorati
 
 Le replay du live Youtube de lancement est disponible ici :
 
-<div class="videoContainer">
-<iframe class="video" src="https://www.youtube.com/embed/ijIa9ZYObJE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+<iframe src="https://www.youtube.com/embed/ijIa9ZYObJE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <!--truncate-->

diff --git a/...s-plugin-content-blog/2022-06-20-gladys-assistant-4-9-with-alexa-integration.md b/...s-plugin-content-blog/2022-06-20-gladys-assistant-4-9-with-alexa-integration.md
@@ -31,8 +31,8 @@ Si tu es gagnant, je te contacterais pour t'envoyer un Amazon Echo Dot 🙂
 
 Le replay du live Youtube de lancement est disponible ici :
 
-<div class="videoContainer">
-<iframe class="video" src="https://www.youtube.com/embed/Da_AQSQedFg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+<iframe  src="https://www.youtube.com/embed/Da_AQSQedFg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <!--truncate-->

diff --git a/i18n/fr/docusaurus-plugin-content-blog/2022-11-01-gladys-assistant-4-12-homekit.md b/i18n/fr/docusaurus-plugin-content-blog/2022-11-01-gladys-assistant-4-12-homekit.md
@@ -15,8 +15,8 @@ Aujourd'hui c'est le lancement de Gladys Assistant 4.12, une version importante
 
 J'ai présenté cette version dans un live YouTube que vous pouvez revoir en replay ici :
 
-<div class="videoContainer">
-    <iframe class="video" src="https://www.youtube.com/embed/MT8iGphtm0M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+    <iframe src="https://www.youtube.com/embed/MT8iGphtm0M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <!--truncate-->

diff --git a/i18n/fr/docusaurus-plugin-content-blog/2023-01-04-2022-yearly-review.md b/i18n/fr/docusaurus-plugin-content-blog/2023-01-04-2022-yearly-review.md
@@ -17,8 +17,8 @@ J'aimerais revenir dans cet article sur tout ce qui a marqué 2022, et vous pré
 
 Si vous préférez ce bilan en vidéo, j'ai fais un live YouTube qui est disponible en replay ici :
 
-<div class="videoContainer">
-    <iframe  class="video"  src="https://www.youtube.com/embed/l2E1wNF-Mtw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+    <iframe  src="https://www.youtube.com/embed/l2E1wNF-Mtw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 </div>
 
 Les bilans des années précédentes:

diff --git a/i18n/fr/docusaurus-plugin-content-blog/2023-05-12-camera-live-streaming.md b/i18n/fr/docusaurus-plugin-content-blog/2023-05-12-camera-live-streaming.md
@@ -15,8 +15,8 @@ Je suis heureux de vous présenter aujourd'hui Gladys Assistant 4.23.
 
 J'ai fais une vidéo pour présenter cette version en détail en expliquant comment chaque nouveauté fonctionne :
 
-<div class="videoContainer">
-    <iframe class="video" src="https://www.youtube.com/embed/cbu1IbvKAKM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+    <iframe src="https://www.youtube.com/embed/cbu1IbvKAKM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 <!--truncate-->

diff --git a/i18n/fr/docusaurus-plugin-content-blog/2023-08-26-gladys-4-27-dashboard.md b/i18n/fr/docusaurus-plugin-content-blog/2023-08-26-gladys-4-27-dashboard.md
@@ -40,6 +40,12 @@ Gladys est désormais pleinement compatible avec 3 nouveaux appareils Zigbee, do
 
 Pour ceux qui ne connaissent pas la gamme [éclairage connecté Zigbee IKEA](https://www.ikea.com/fr/fr/cat/eclairage-connecte-36812/), c'est une gamme très accessible (dès 9,99€ l'ampoule, 6,99€ l'interrupteur), et de bonne qualité. Si vous commencez en domotique, c'est un bon moyen de commencer. En plus, c'est trouvable dans tous les magasins IKEA ou en livraison sur leur site !
 
+J'ai d'ailleurs fais une vidéo YouTube sur le sujet :
+
+<div class="youtubeVideoContainerInBlog">
+    <iframe src="https://www.youtube.com/embed/gNlZ2bId8Z0?si=zbfeILVdXuU7AG8x" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+</div>
+
 ### Bouton IKEA TRÅDFRI avec variateur d'intensité
 
 ![IKEA TRÅDFRI avec variateur d'intensité](../../../static/img/articles/fr/gladys-4-27/ikea-tradfri-button.jpg)

diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/installation/0_hardware.md b/i18n/fr/docusaurus-plugin-content-docs/current/installation/0_hardware.md
@@ -13,8 +13,8 @@ Récapitulons les différentes options :
 
 Ma vidéo sur le sujet :
 
-<div class="videoContainer" style={{marginBottom: '20px' }}>
-<iframe class="video" src="https://www.youtube.com/embed/6pBeBcgLvj0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog" style={{marginBottom: '20px' }}>
+<iframe src="https://www.youtube.com/embed/6pBeBcgLvj0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 Pour installer Gladys avec Docker, [le tutoriel sur cette documentation](/fr/docs/installation/docker/).

diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/installation/1_raspberry-pi.md b/i18n/fr/docusaurus-plugin-content-docs/current/installation/1_raspberry-pi.md
@@ -22,8 +22,8 @@ Nous proposons 2 façons d'installer Gladys: sur une micro-SD, ou sur un disque
 
 L'installation sur micro-SD est un bon moyen de commencer avec Gladys.
 
-<div class="videoContainer">
-<iframe class="video" src="https://www.youtube.com/embed/yWAX-NAxjZQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+<iframe src="https://www.youtube.com/embed/yWAX-NAxjZQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 Il faut néanmoins rester conscient que sur le long terme, il est probable que vous ayez des problèmes de corruptions de données car les micro-SD s'usent vite.
@@ -70,8 +70,8 @@ Si cela ne marche pas, vous pouvez y accéder en tapant l'IP de votre Raspberry
 
 Pour installer Gladys sur un SSD, j'ai fais un tutoriel vidéo assez complet sur le sujet :
 
-<div class="videoContainer" style={{marginBottom: '2rem'}}>
-<iframe class="video" src="https://www.youtube.com/embed/Zn7imzI0oYU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog" style={{marginBottom: '2rem'}}>
+<iframe  src="https://www.youtube.com/embed/Zn7imzI0oYU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 :::warning

diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/integrations/alexa.md b/i18n/fr/docusaurus-plugin-content-docs/current/integrations/alexa.md
@@ -42,8 +42,8 @@ Tu peux suivre les étapes dans le mail.
 
 Si tu veux, j'ai aussi fait un live où je montre comment configurer Gladys Plus:
 
-<div class="videoContainer">
-<iframe  class="video" src="https://www.youtube.com/embed/TmjrBeufjyo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+<iframe  src="https://www.youtube.com/embed/TmjrBeufjyo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 ## Configurer Alexa

diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/integrations/camera.md b/i18n/fr/docusaurus-plugin-content-docs/current/integrations/camera.md
@@ -130,6 +130,6 @@ Une fois que la caméra fonctionne, cliquez sur le bouton "Sauvegarder".
 
 Si vous préférez les tutoriels en vidéo, j'ai enregistré une vidéo pour vous montrer en direct comment faire:
 
-<div class="videoContainer">
-    <iframe class="video" src="https://www.youtube.com/embed/sCFoiqwSIq0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+    <iframe src="https://www.youtube.com/embed/sCFoiqwSIq0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/integrations/google-home.md b/i18n/fr/docusaurus-plugin-content-docs/current/integrations/google-home.md
@@ -44,8 +44,8 @@ Tu peux suivre les étapes dans le mail.
 
 Si tu veux, j'ai aussi fait un live où je montre comment configurer Gladys Plus:
 
-<div class="videoContainer">
-<iframe  class="video" src="https://www.youtube.com/embed/TmjrBeufjyo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+<iframe  src="https://www.youtube.com/embed/TmjrBeufjyo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 ## Configurer Google Home

diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/integrations/mqtt.md b/i18n/fr/docusaurus-plugin-content-docs/current/integrations/mqtt.md
@@ -134,6 +134,6 @@ Il y a plein de tutoriels sur internet pour toutes les plateformes :)
 
 J'ai enregistré un petit tutoriel en mode live coding pour Node.js par exemple:
 
-<div class="videoContainer">
-<iframe class="video" src="https://www.youtube.com/embed/o5yn_FnYtkc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+<iframe src="https://www.youtube.com/embed/o5yn_FnYtkc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/integrations/philips-hue.md b/i18n/fr/docusaurus-plugin-content-docs/current/integrations/philips-hue.md
@@ -6,8 +6,8 @@ sidebar_label: Philips Hue
 
 Car c'est toujours mieux en vidéo, voilà une petite démonstration de l'intégration Philips Hue dans Gladys 🙂
 
-<div class="videoContainer">
-<iframe  class="video" src="https://www.youtube.com/embed/PjLx7TYZdRM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+<iframe  src="https://www.youtube.com/embed/PjLx7TYZdRM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 ## Tutoriel

diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/integrations/zigbee2mqtt.md b/i18n/fr/docusaurus-plugin-content-docs/current/integrations/zigbee2mqtt.md
@@ -12,8 +12,8 @@ Nous utilions pour cela l'excellent projet opens-source [Zigbee2Mqtt](https://ww
 
 Si vous préférez en vidéo, j'ai filmé ce tutoriel sur Youtube pour vous montrer comment faire concrètement :
 
-<div class="videoContainer">
-<iframe  class="video" src="https://www.youtube.com/embed/ALW3uDB9P0s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+<iframe src="https://www.youtube.com/embed/ALW3uDB9P0s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 ## Le matériel nécessaire

diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/plus/intro.md b/i18n/fr/docusaurus-plugin-content-docs/current/plus/intro.md
@@ -12,8 +12,8 @@ L'objectif de ce service est de proposer des fonctionnalités assez pratique à
 
 J'ai fais une vidéo sur YouTube où je présente comment fonctionne Gladys Plus:
 
-<div class="videoContainer">
-<iframe  class="video" src="https://www.youtube.com/embed/TmjrBeufjyo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="youtubeVideoContainerInBlog">
+<iframe src="https://www.youtube.com/embed/TmjrBeufjyo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 
 ## Les fonctionnalités proposées

diff --git a/src/components/Home.js b/src/components/Home.js
@@ -663,15 +663,15 @@ function Home({ integrations, lang }) {
                       </h4>
                     </div>
                     <div className="col col--4">
-                      <YoutubeEmbedVideo id="cbu1IbvKAKM" disablePadding />
+                      <YoutubeEmbedVideo id="gNlZ2bId8Z0" />
                       <h4 className={styles.homeYouTubeVideoTitle}>
-                        Streaming de caméra sur le tableau de bord
+                        Le trio ULTIME pour automatiser la lumière ??
                       </h4>
                     </div>
                     <div className="col col--4">
-                      <YoutubeEmbedVideo id="l2E1wNF-Mtw" />
+                      <YoutubeEmbedVideo id="FdD56kxIbGs" disablePadding />
                       <h4 className={styles.homeYouTubeVideoTitle}>
-                        Live: Bilan de 2022 et projets pour 2023
+                        Utiliser ChatGPT pour contrôler sa maison connectée
                       </h4>
                     </div>
                   </div>

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -54,3 +54,19 @@ html[data-theme="dark"] .header-github-link:before {
   width: 100%;
   height: 100%;
 }
+
+/** BLOG **/
+
+.youtubeVideoContainerInBlog {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+}
+
+.youtubeVideoContainerInBlog iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}