jeans/esp-web-tools
jeans/esp-web-tools
1
0
Fork 0
mirror of https://github.com/esphome/esp-web-tools.git synced 2025-07-28 14:16:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add videos

Browse Source
This commit is contained in:
Paulus Schoutsen 2021-06-07 17:12:30 +00:00
parent 8d06e35fc0
commit aa78abaea3
1 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
index.html
View File

@ -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 it does, the user will be offered to configure the WiFi after
is done. 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