Browse Source

Add videos

Paulus Schoutsen 4 years ago
parent
commit
aa78abaea3
1 changed files with 39 additions and 2 deletions
  1. 39 2
      index.html

+ 39 - 2
index.html

@@ -20,6 +20,20 @@
       a {
       a {
         color: #03a9f4;
         color: #03a9f4;
       }
       }
+      .videoWrapper {
+        position: relative;
+        padding-bottom: 56.25%; /* 16:9 */
+        height: 0;
+        margin-bottom: 25px;
+        background: #000;
+      }
+      .videoWrapper iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
       .footer {
       .footer {
         margin-top: 24px;
         margin-top: 24px;
         border-top: 1px solid #ccc;
         border-top: 1px solid #ccc;
@@ -75,6 +89,17 @@
         detect the type of the connected ESP device and find the right firmware
         detect the type of the connected ESP device and find the right firmware
         files in the manifest.
         files in the manifest.
       </p>
       </p>
+      <div class="videoWrapper">
+        <iframe
+          width="560"
+          height="315"
+          src="https://www.youtube-nocookie.com/embed/jGfa0xMhUn4"
+          title="YouTube video player"
+          frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+        ></iframe>
+      </div>
       <h2>Using ESP Web Tools on your website</h2>
       <h2>Using ESP Web Tools on your website</h2>
       <p>
       <p>
         To add this to your own website, create a manifest and add the button to
         To add this to your own website, create a manifest and add the button to
@@ -160,9 +185,21 @@
       <p>
       <p>
         Each build also allows you to specify if it supports
         Each build also allows you to specify if it supports
         <a href="https://www.improv-wifi.com">the Improv WiFi standard</a>. If
         <a href="https://www.improv-wifi.com">the Improv WiFi standard</a>. If
-        it does, the user will be offered to configure the WiFi after flashing
-        is done.
+        it does, the user will be offered to configure the WiFi after
+        installation is done as can be seen in the video below.
       </p>
       </p>
+      <div class="videoWrapper">
+        <iframe
+          width="560"
+          height="315"
+          src="https://www.youtube-nocookie.com/embed/jGfa0xMhUn4?start=186"
+          title="YouTube video player"
+          frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+        ></iframe>
+      </div>
+
       <h3>Customizing the look and feel</h3>
       <h3>Customizing the look and feel</h3>
       <p>
       <p>
         You can customize both the activation button and the message that is
         You can customize both the activation button and the message that is