Merge pull request #127 from Lemoncode/feature/#122-reposition-video

Feature/#122 reposition video

Author: brauliodiez

front/static/assets/codepaster.mp4

@@ -59,6 +59,7 @@ <h3 class="instructions__subtitle">What can I use it for?</h3>
               makes Code Paster a great and simple application to be used in any
               kind of online activity which requires text to be shared.
             </p>
+
             <h3 class="instructions__subtitle">How does it work?</h3>
             <ol class="instructions__list">
               <li class="instructions__text">
@@ -77,23 +78,16 @@ <h3 class="instructions__subtitle">How does it work?</h3>
                 in the room will be able to see whatever you have writen in it
               </li>
             </ol>
+            <div class="video-container">
+              <video
+              class="video"
+              src="./assets/codepaster.mp4"
+              controls
+              /></video>
+            </div>
           </article>
         </div>
       </div>
-      <!-- / video / -->
-      <section class="box-content border-bottom">
-        <div class="video-section-container">
-          <h2 class="heading">Video tutorial</h2>
-          <div class="video-container">
-            <iframe
-              src="https://www.youtube.com/embed/4sswp02n0Yg"
-              frameborder="0"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowfullscreen
-            ></iframe>
-          </div>
-        </div>
-      </section>
 
       <!-- / credits / -->
       <div class="box-content border-bottom" id="credits">

front/static/index.html

@@ -345,12 +345,12 @@ ul {
   justify-content: space-between;
   width: 70%;
   margin: 0 auto;
-  padding: 2% 0;
 }
 
 .instructions {
   width: 65%;
   margin-left: auto;
+  display: block;
   padding: 3rem;
   border: 2px solid var(--color-grey-medium);
 }
@@ -372,6 +372,31 @@ ul {
   margin-bottom: 1rem;
 }
 
+.video-container {
+  display: inline-flex;
+  justify-content: center;
+  align-content: center;
+  width: 100%;
+  margin-top: 4%;
+  padding: 0;
+}
+
+.video {
+  width: 95%;
+  max-height: 220px;
+  padding: 0;
+  background-color: #151611;
+  border-radius: 5px;
+}
+
+@media (min-width: 1024px) {
+  .video {
+    max-width: 400px;
+
+    max-height: 300px;
+  }
+}
+
 @media only screen and (max-width: 1250px) {
   .instructions-container {
     width: 70%;
@@ -423,35 +448,6 @@ ul {
   }
 }
 
-/* - - - - - video - - - - - */
-.video-section-container {
-  width: 70%;
-}
-
-.video-container {
-  position: relative;
-  padding-bottom: 56.25%;
-  padding-top: 30px;
-  height: 0;
-  overflow: hidden;
-}
-
-.video-container iframe,
-.video-container object,
-.video-container embed {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-@media only screen and (max-width: 770px) {
-  .video-section-container {
-    width: 100%;
-  }
-}
-
 /* - - - - - credits - - - - - */
 .card {
   display: flex;