add youtube video

Feli25 · Mar 6, 2021 · 59b3075 · 59b3075
1 parent 612082e
commit 59b3075
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 17 deletions.
diff --git a/client/src/components/pages/Home.jsx b/client/src/components/pages/Home.jsx
@@ -92,24 +92,37 @@ export default class HomeNew extends Component {
           </div>
         </div>
 
-          <div className="image-tiles">
-            <div className="image-tiles-column">
-              <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495663/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.19_PM_2.jpg" alt="modell"/>
-              <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495664/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.21_PM.jpg" alt="modell"/>
-            </div>
-            <div className="image-tiles-column">
-              <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495664/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.22_PM_1.jpg" alt="modell"/>
-              <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495664/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.20_PM_1.jpg" alt="modell"/>
-            </div>
-            <div className="image-tiles-column">
-              <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495665/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.42_PM.jpg" alt="modell"/>
-              <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495665/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.24_PM.jpg" alt="modell"/>
-            </div>
-            <div className="image-tiles-column">
-              <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495664/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.23_PM.jpg" alt="modell"/>
-              <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495664/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.23_PM_1.jpg" alt="modell"/>
-            </div>
+        <div className="image-tiles">
+          <div className="image-tiles-column">
+            <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495663/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.19_PM_2.jpg" alt="modell"/>
+            <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495664/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.21_PM.jpg" alt="modell"/>
+          </div>
+          <div className="image-tiles-column">
+            <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495664/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.22_PM_1.jpg" alt="modell"/>
+            <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495664/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.20_PM_1.jpg" alt="modell"/>
           </div>
+          <div className="image-tiles-column">
+            <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495665/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.42_PM.jpg" alt="modell"/>
+            <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495665/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.24_PM.jpg" alt="modell"/>
+          </div>
+          <div className="image-tiles-column">
+            <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495664/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.23_PM.jpg" alt="modell"/>
+            <img src="https://res.cloudinary.com/mcfrihfd/image/upload/v1582495664/project2React/home/WhatsApp_Image_2020-02-23_at_10.53.23_PM_1.jpg" alt="modell"/>
+          </div>
+        </div>
+
+         <iframe 
+          title="videoKirschpups"
+          src="https://www.youtube.com/embed/gf_hijPN_Jk?rel=0&amp;modestbranding=1" 
+          frameborder="0" 
+          // allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+          allowfullscreen="allowfullscreen"
+          mozallowfullscreen="mozallowfullscreen" 
+          msallowfullscreen="msallowfullscreen" 
+          oallowfullscreen="oallowfullscreen" 
+          webkitallowfullscreen="webkitallowfullscreen"
+          className="video">
+        </iframe>
       </div>
     )
   }

diff --git a/client/src/styles/home.scss b/client/src/styles/home.scss
@@ -144,6 +144,15 @@
     }
   }
 
+  .video {
+    width: 100%;
+    height: 400px;
+    margin-top: $base-spacing;
+    max-width: 600px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
 }