Make videos more responsive and caption

Author: tsterbak

public/index.html

@@ -163,12 +163,11 @@ <h4 class="is-size-4 has-text-weight-bold mb-2">Bring your own ROM</h4>
       <div class="column is-6 is-block-desktop">
         <figure class="image is-16by9" id="demo-video">
           <iframe title="OpenAndroidInstaller demo: Install LineageOS on Google Pixel 3a" class="has-ratio"
-            src="https://peertube.tv/videos/embed/f6991d31-52da-4822-b0af-06ae322d02e4?muted=1&amp;warningTitle=0&amp;p2p=0" allowfullscreen=""
-            sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315" frameborder="0"></iframe>
-          <figcaption class="has-text-centered">
-            <i>Demo: How to how to unlock the bootloader and install LineageOS.</i>
-          </figcaption>
+            src="https://peertube.tv/videos/embed/f6991d31-52da-4822-b0af-06ae322d02e4?muted=1&amp;warningTitle=0&amp;p2p=0"
+            allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315"
+            frameborder="0"></iframe>
         </figure>
+        <p class="subtitle is-6 has-text-centered is-italic">Demo: How to how to unlock the bootloader and install LineageOS.</p>
         <!--<img class="mx-auto mt-0-widescreen is-block image" src="static/Screenshot-start-page.png"
               alt="Open Android Installer Startpage Screenshot">-->
       </div>
@@ -294,14 +293,14 @@ <h4>A selection of different Android-based ROMs and where to find them:</h4>
                 target="_blank">xda-developers
                 forum</a> for an appropriate version for your device.</li>
           </ul>
-        <figure class="image">
-          <iframe title="OpenAndroidInstaller demo: Install LineageOS and MicroG on Samsung Galaxy S7"
-            src="https://peertube.tv/videos/embed/62b33061-0f10-4782-8ec1-fd1afcbc8ac0?muted=1&amp;warningTitle=0&amp;p2p=0" allowfullscreen=""
-            sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315" frameborder="0"></iframe>
-          <figcaption class="has-text-centered">
-            <i>Demo: How to install Addons like MicroG alongside LineageOS.</i>
-          </figcaption>
-        </figure>
+          <figure class="image is-16by9">
+            <iframe title="OpenAndroidInstaller demo: Install LineageOS and MicroG on Samsung Galaxy S7"
+              class="has-ratio"
+              src="https://peertube.tv/videos/embed/62b33061-0f10-4782-8ec1-fd1afcbc8ac0?muted=1&amp;warningTitle=0&amp;p2p=0"
+              allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315"
+              frameborder="0"></iframe>
+          </figure>
+          <p class="subtitle is-6 has-text-centered is-italic">Demo: How to install Addons like MicroG alongside LineageOS.</p>
         </div>
       </div>
     </div>

templates/index.html

@@ -63,12 +63,11 @@ <h4 class="is-size-4 has-text-weight-bold mb-2">Bring your own ROM</h4>
       <div class="column is-6 is-block-desktop">
         <figure class="image is-16by9" id="demo-video">
           <iframe title="OpenAndroidInstaller demo: Install LineageOS on Google Pixel 3a" class="has-ratio"
-            src="https://peertube.tv/videos/embed/f6991d31-52da-4822-b0af-06ae322d02e4?muted=1&amp;warningTitle=0&amp;p2p=0" allowfullscreen=""
-            sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315" frameborder="0"></iframe>
-          <figcaption class="has-text-centered">
-            <i>Demo: How to how to unlock the bootloader and install LineageOS.</i>
-          </figcaption>
+            src="https://peertube.tv/videos/embed/f6991d31-52da-4822-b0af-06ae322d02e4?muted=1&amp;warningTitle=0&amp;p2p=0"
+            allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315"
+            frameborder="0"></iframe>
         </figure>
+        <p class="subtitle is-6 has-text-centered is-italic">Demo: How to how to unlock the bootloader and install LineageOS.</p>
         <!--<img class="mx-auto mt-0-widescreen is-block image" src="static/Screenshot-start-page.png"
               alt="Open Android Installer Startpage Screenshot">-->
       </div>
@@ -194,14 +193,14 @@ <h4>A selection of different Android-based ROMs and where to find them:</h4>
                 target="_blank">xda-developers
                 forum</a> for an appropriate version for your device.</li>
           </ul>
-        <figure class="image">
-          <iframe title="OpenAndroidInstaller demo: Install LineageOS and MicroG on Samsung Galaxy S7"
-            src="https://peertube.tv/videos/embed/62b33061-0f10-4782-8ec1-fd1afcbc8ac0?muted=1&amp;warningTitle=0&amp;p2p=0" allowfullscreen=""
-            sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315" frameborder="0"></iframe>
-          <figcaption class="has-text-centered">
-            <i>Demo: How to install Addons like MicroG alongside LineageOS.</i>
-          </figcaption>
-        </figure>
+          <figure class="image is-16by9">
+            <iframe title="OpenAndroidInstaller demo: Install LineageOS and MicroG on Samsung Galaxy S7"
+              class="has-ratio"
+              src="https://peertube.tv/videos/embed/62b33061-0f10-4782-8ec1-fd1afcbc8ac0?muted=1&amp;warningTitle=0&amp;p2p=0"
+              allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="560" height="315"
+              frameborder="0"></iframe>
+          </figure>
+          <p class="subtitle is-6 has-text-centered is-italic">Demo: How to install Addons like MicroG alongside LineageOS.</p>
         </div>
       </div>
     </div>