Lite youtube (PX4#3300)

* Update all docs with lite-youtube * Update vitepress setup to use lite-youtube
benjinne · Jul 18, 2024 · 9f03d69 · 9f03d69
1 parent cb12f47
commit 9f03d69
Show file tree

Hide file tree

Showing 54 changed files with 123 additions and 117 deletions.
diff --git a/.vitepress/config.mjs b/.vitepress/config.mjs
@@ -1,8 +1,6 @@
 import { defineConfig } from "vitepress";
 const getSidebar = require("./get_sidebar.js");
-//import { getSidebar } from "./get_sidebar";
 
-import blockEmbedPlugin from "markdown-it-block-embed";
 // Tabs: https://github.com/Red-Asuka/vitepress-plugin-tabs
 import tabsPlugin from "@red-asuka/vitepress-plugin-tabs";
 
@@ -28,7 +26,6 @@ export default defineConfig({
     math: true,
     config: (md) => {
       // use more markdown-it plugins!
-      md.use(blockEmbedPlugin);
       tabsPlugin(md); //https://github.com/Red-Asuka/vitepress-plugin-tabs
     },
   },
@@ -195,4 +192,12 @@ export default defineConfig({
       gtag('config', 'G-91EWVWRQ93');`,
     ],
   ],
+
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: (tag) => tag === "lite-youtube",
+      },
+    },
+  },
 });
diff --git a/.vitepress/theme/index.js b/.vitepress/theme/index.js
@@ -1,5 +1,6 @@
 // https://vitepress.dev/guide/custom-theme
 import { h } from "vue";
+
 import DefaultTheme from "vitepress/theme";
 import "./style.css";
 
@@ -8,6 +9,14 @@ import { onMounted, watch, nextTick } from "vue";
 import { useRoute } from "vitepress";
 import mediumZoom from "medium-zoom";
 
+// For https://www.npmjs.com/package/lite-youtube-embed
+import { inBrowser } from "vitepress";
+import "lite-youtube-embed/src/lite-yt-embed.css";
+if (inBrowser) {
+  // @ts-ignore
+  import("lite-youtube-embed");
+}
+
 // Support redirect plugin
 import Redirect from "./components/Redirect.vue";
 

diff --git a/en/can/index.md b/en/can/index.md
@@ -75,21 +75,22 @@ See [PX4 DroneCAN Firmware](../dronecan/px4_cannode_fw.md) for more information.
 
 Intro to DroneCAN (UAVCANv0) and practical example with setup in QGroundControl:
 
-@[youtube](https://youtu.be/IZMTq9fTiOM)
+<lite-youtube videoid="IZMTq9fTiOM" title="Intro to DroneCAN (UAVCANv0) and practical example with setup in QGroundControl"/>
 
 ### Cyphal
 
-UAVCAN v1 for drones — PX4 Developer Summit Virtual 2020
+UAVCAN v1 for drones (Cyphal) — PX4 Developer Summit Virtual 2020
 
-@[youtube](https://youtu.be/6Bvtn_g8liU)
+<lite-youtube videoid="6Bvtn_g8liU" title="UAVCAN v1 for drones — PX4 Developer Summit Virtual 2020"/>
 
 ---
 
 Getting started using UAVCAN v1 with PX4 on the NXP UAVCAN Board — PX4 Developer Summit Virtual 2020
-@[youtube](https://youtu.be/MwdHwjaXYKs)
+
+<lite-youtube videoid="MwdHwjaXYKs" title="Getting started using UAVCAN v1 with PX4 on the NXP UAVCAN Board"/>
 
 ---
 
 UAVCAN: a highly dependable publish-subscribe protocol for hard real-time intra-vehicular networking — PX4 Developer Summit Virtual 2019
 
-@[youtube](https://youtu.be/MBtROivYPik)
+<lite-youtube videoid="MBtROivYPik" title="UAVCAN: a highly dependable publish-subscribe protocol for hard ..."/>
diff --git a/en/complete_vehicles_mc/betafpv_beta75x.md b/en/complete_vehicles_mc/betafpv_beta75x.md
@@ -55,4 +55,4 @@ To install and configure PX4:
 
 ## Video
 
-@[youtube](https://youtu.be/_-O0kv0Qsh4)
+<lite-youtube videoid="_-O0kv0Qsh4" title="PX4 running on the BetaFPV Whoop"/>
diff --git a/en/complete_vehicles_mc/crazyflie2.md b/en/complete_vehicles_mc/crazyflie2.md
@@ -304,7 +304,3 @@ To connect to Crazyflie 2.0 via MAVROS:
   ```
 
 - Restart QGroundControl if it doesn't connect.
-
-## Flying
-
-@[youtube](https://youtu.be/2Bcy3k1h5uc)
diff --git a/en/complete_vehicles_mc/crazyflie21.md b/en/complete_vehicles_mc/crazyflie21.md
@@ -287,4 +287,4 @@ To connect to Crazyflie 2.1 via MAVROS:
 
 ## Flying
 
-@[youtube](https://www.youtube.com/watch?v=0qy7O3fVN2c)
+<lite-youtube videoid="0qy7O3fVN2c" title="Crazyflie 2.1 - PX4 Firmware (stabilized mode)"/>
diff --git a/en/complete_vehicles_mc/nanomind110.md b/en/complete_vehicles_mc/nanomind110.md
@@ -22,7 +22,7 @@ The user guide is [here](http://mindpx.net/assets/accessories/NanoMind_110_user_
 
 ### Flight video
 
-@[youtube](https://youtu.be/bLtKa--Buic)
+<lite-youtube videoid="bLtKa--Buic" title="NanoMind with external compass flying EKF2 estimator"/>
 
 ### Where to buy
 

diff --git a/en/concept/flight_tasks.md b/en/concept/flight_tasks.md
@@ -185,13 +185,13 @@ The second is an update, which covers the changes in PX4 v1.11.
 
 A description of how flight modes work in PX4 v1.9 (Dennis Mannhart, Matthias Grob).
 
-@[youtube](https://youtu.be/-dkQG8YLffc)
+<lite-youtube videoid="-dkQG8YLffc" title="PX4 Flight Task Architecture Overview"/>
 
 <!-- datestamp:video:youtube:20190704:PX4 Flight Task Architecture Overview — PX4 Developer Summit 2019 -->
 
 ### Overview of multicopter control from sensors to motors (PX4 Developer Summit Virtual 2020)
 
-@[youtube](https://youtu.be/orvng_11ngQ?t=560)
+<lite-youtube videoid="orvng_11ngQ" params="start=560" title="Overview of multicopter control from sensors to motors"/>
 
 <!-- datestamp:video:youtube:20200720:Overview of multicopter control from sensors to motors — PX4 Developer Summit Virtual 2020 From 9min20sec - Section on flight tasks-->
 

diff --git a/en/config/_autotune.md b/en/config/_autotune.md
@@ -29,7 +29,7 @@ The airframe must fly well enough to handle moderate disturbances, and should be
 
 :::
 
-@[youtube](https://youtu.be/5xswOhhqrIQ)
+<lite-youtube videoid="5xswOhhqrIQ" title="QGroundControl Autotune Feature Breakdown for PX4 Autopilot"/>
 
 ## Pre-tuning Test
 

diff --git a/en/config/flight_mode.md b/en/config/flight_mode.md
@@ -101,7 +101,7 @@ The video below shows how this is done with the *FrSky Taranis* transmitter.
 <!-- [youtube](https://youtu.be/scqO7vbH2jo) Video has gone private and is no longer available -->
 <!-- @[youtube](https://youtu.be/BNzeVGD8IZI?t=427) - video showing how to set the QGC side - at about 7mins and 3 secs -->
 
-@[youtube](https://youtu.be/TFEjEQZqdVA)
+<lite-youtube videoid="TFEjEQZqdVA" title="Taranis Mode Switches"/>
 
 The *QGroundControl* configuration is then [as described above](#flight-mode-selection).
 

diff --git a/en/config/index.md b/en/config/index.md
@@ -65,7 +65,7 @@ Auto-tuning is supported, and recommended, on the following frames:
 
 The video below shows most of the calibration process (it uses an older version of _QGroundControl_, but most of the process is unchanged).
 
-@[youtube](https://youtu.be/91VGmdSlbo4)
+<lite-youtube videoid="91VGmdSlbo4" title="PX4 Autopilot Setup Tutorial Preview"/>
 
 ## Support
 

diff --git a/en/contribute/docs.md b/en/contribute/docs.md
@@ -232,9 +232,9 @@ When you add a new page you must also add it to `en/SUMMARY.md`!
 
 4. Videos:
 
-   - Youtube videos can be added using the format `@[youtube](https://youtu.be/<youtube-video-id>)` (supported via the [markdown-it-block-embed](https://www.npmjs.com/package/markdown-it-block-embed) plugin).
+   - Youtube videos can be added using the format `<lite-youtube videoid="<youtube-video-id>" title="your title"/>` (supported via the [https://www.npmjs.com/package/lite-youtube-embed](https://www.npmjs.com/package/lite-youtube-embed) custom element, which has other parameters you can pass).
      - Use instructional videos sparingly as they date badly, and are hard to maintain.
-     - Cool videos of airframes in flighyt are always welcome.
+     - Cool videos of airframes in flight are always welcome.
 
 ## Where Do I Add Changes?
 

diff --git a/en/debug/gdb_hardfault.md b/en/debug/gdb_hardfault.md
@@ -8,7 +8,7 @@ This might occur when key areas in RAM have been corrupted.
 The following video demonstrates hardfault debugging on PX4 using Eclipse and a JTAG debugger.
 It was presented at the PX4 Developer Conference 2019.
 
-@[youtube](https://youtu.be/KZkAM_PVOi0)
+<lite-youtube videoid="KZkAM_PVOi0" title="Hardfault debugging on PX4"/>
 
 ## Debugging Hard Faults in NuttX
 

diff --git a/en/dev_setup/dev_env_linux_ubuntu.md b/en/dev_setup/dev_env_linux_ubuntu.md
@@ -83,7 +83,7 @@ The video suggests that you build source using JMAVSim, entering the command: `m
 As JMAVSim is now community-supported, you should instead build using Gazebo or Gazebo Classic, as shown in [Building the Code](../dev_setup/building_px4.md#first-build-using-a-simulator)
 :::
 
-@[youtube](https://youtu.be/OtValQdAdrU).
+<lite-youtube videoid="OtValQdAdrU" title=" Setting up your PX4 development environment on Linux"/>
 
 ## Other Targets
 

diff --git a/en/dev_setup/dev_env_mac.md b/en/dev_setup/dev_env_mac.md
@@ -13,7 +13,7 @@ To build other targets you will need to use a [different OS](../dev_setup/dev_en
 
 ## Video Guide
 
-@[youtube](https://youtu.be/tMbMGiMs1cQ)
+<lite-youtube videoid="tMbMGiMs1cQ" title="Setting up your PX4 development environment on macOS"/>
 
 ## Base Setup
 

diff --git a/en/dev_setup/qtcreator.md b/en/dev_setup/qtcreator.md
@@ -18,7 +18,7 @@ Qt creator offers clickable symbols, auto-completion of the complete codebase an
 
 The video below shows how it is used.
 
-@[youtube](https://www.youtube.com/watch?v=Bkk8zttWxEI&rel=0&vq=hd720)
+<lite-youtube videoid="Bkk8zttWxEI" title="(Qt Creator) PX4 Flight Stack Build Experience"/>
 
 ## IDE Setup
 
@@ -54,6 +54,6 @@ cd build/creator
 cmake ../.. -G "CodeBlocks - Unix Makefiles"
 ```
 
-That's it! Start _Qt Creator_, then complete the steps in the video below to set up the project to build.
+That's it! Start _Qt Creator_ and then set up the project to build.
 
-@[youtube](https://www.youtube.com/watch?v=0pa0gS30zNw&rel=0&vq=hd720)
+<!-- note, video here was removed/made private, and in any case out of date. Just hoping people can work it out -->
diff --git a/en/dronecan/ark_flow.md b/en/dronecan/ark_flow.md
@@ -123,7 +123,7 @@ If you see a solid red LED there is an error and you should check the following:
 
 ## Video
 
-@[youtube](https://www.youtube.com/watch?v=SAbRe1fi7bU&list=PLUepQApgwSozmwhOo-dXnN33i2nBEl1c0)
+<lite-youtube videoid="SAbRe1fi7bU" params="list=PLUepQApgwSozmwhOo-dXnN33i2nBEl1c0" title="ARK Flow Indoor Position Hold x64"/>
 
 <!-- ARK Flow with PX4 Optical Flow Position Hold: 20210605 -->
 

diff --git a/en/dronecan/sapog.md b/en/dronecan/sapog.md
@@ -93,7 +93,7 @@ To enumerate the ESC:
 
 The following video demonstrates the process:
 
-@[youtube](https://www.youtube.com/watch?v=4nSa8tvpbgQ)
+<lite-youtube videoid="4nSa8tvpbgQ" title="Zubax Orel 20 with PX4 Flight Stack - Auto-enumeration"/>
 
 ### Manual ESC Enumeration using Sapog
 

diff --git a/en/flight_controller/airlink.md b/en/flight_controller/airlink.md
@@ -21,7 +21,7 @@ AIRLink has two computers and integrated LTE Module:
 
 ## Feature Highlights
 
-@[youtube](https://youtu.be/VcBx9DLPN54)
+<lite-youtube videoid="VcBx9DLPN54" title="SmartAP AIRLink - The Most Advanced AI Drone Avionics"/>
 
 ## Specifications
 
@@ -86,7 +86,7 @@ Purchase from the original Sky-Drones Store (worldwide shipping with 1-2 days or
 
 ## AIRLink Enterprise Kit Accessories
 
-@[youtube](https://youtu.be/lex7axW8WQg)
+<lite-youtube videoid="lex7axW8WQg" title="SmartAP AIRLink - Unboxing"/>
 
 AIRLink Enterprise arrives with everything needed to setup the autopilot system.
 

diff --git a/en/flight_controller/pixhawk.md b/en/flight_controller/pixhawk.md
@@ -86,7 +86,7 @@ Order mRo Pixhawk from:
 - 3.3 and 6.6V ADC inputs
 - Internal microUSB port and external microUSB port extension
 
-@[youtube](https://youtu.be/gCCC5A-Bvv4)
+<lite-youtube videoid="gCCC5A-Bvv4" title="PX4 Pixhawk (3DR) Multicolor Led in action"/>
 
 ### Power System and Protection
 

diff --git a/en/flight_modes_mc/follow_me.md b/en/flight_modes_mc/follow_me.md
@@ -47,9 +47,9 @@ Angle, height, and distance values set using the RC controller are discarded whe
 If you exit Follow-Me mode and activate it again the values will be reset to their defaults.
 :::
 
-Demo video:
+### Video
 
-@[youtube](https://youtu.be/csuMtU6seXI?t=155)
+<lite-youtube videoid="csuMtU6seXI" params="start=155" title="PX4 Follow Target follows a Rover!"/>
 
 ### Safety Precautions
 
@@ -166,7 +166,9 @@ The follow-me behavior can be configured using the following parameters:
 
 3. Using the RC Adjustment for height, distance and angle, you can get some creative camera shots.
 
-   @[youtube](https://www.youtube.com/watch?v=o3DhvCL_M1E)
+   <lite-youtube videoid="o3DhvCL_M1E" title="YUN0012 almostCinematic"/>
+
+
    This video demonstrates a Google-Earth view perspective, by adjusting the height to around 50 meters (high), distance to 1 meter (close). Which allows a perspective as shot from a satellite.
 
 ## Known Issues

diff --git a/en/frames_autogyro/thunderfly_auto_g2.md b/en/frames_autogyro/thunderfly_auto_g2.md
@@ -144,7 +144,7 @@ It can be handled, for example, by nulling the engine’s output in the transmit
 
 ## Video
 
-@[youtube](https://youtu.be/YhXXSWz5wWs)
+<lite-youtube videoid="YhXXSWz5wWs" title="[ThunderFly] 3D printed autogyro rotor"/>
 
 ## Photo gallery of changes
 

diff --git a/en/frames_multicopter/dji_f450_cuav_5nano.md b/en/frames_multicopter/dji_f450_cuav_5nano.md
@@ -222,7 +222,7 @@ For instructions on how, start from [Autotune](../config/autotune_mc.md).
 
 ## Video
 
-@[youtube](https://youtu.be/b0bKNdDqVHw)
+<lite-youtube videoid="b0bKNdDqVHw" title="CUAV Nano"/>
 
 
 ## Acknowledgments

diff --git a/en/frames_multicopter/dji_f450_cuav_5plus.md b/en/frames_multicopter/dji_f450_cuav_5plus.md
@@ -222,7 +222,7 @@ For instructions on how, start from [Autotune](../config/autotune_mc.md).
 
 ## Video
 
-@[youtube](https://youtu.be/r-IkaVpN1Ko)
+<lite-youtube videoid="r-IkaVpN1Ko" title="CUAV V5+"/>
 
 
 ## Acknowledgments

diff --git a/en/frames_multicopter/holybro_x500v2_pixhawk6c.md b/en/frames_multicopter/holybro_x500v2_pixhawk6c.md
@@ -52,8 +52,6 @@ This topic provides full instructions for building the [Holybro X500 V2 ARF Kit]
 
 1. Use Socket Cap Screws M2.5*6 and screw the bottom plate on the 4 hangers (that we inserted in the 2 bars on the 3rd step of the payload holder assembly)
 
-  <!--  @[youtube](https://youtu.be/Qjs6pqarRIY) -->
-
 ### Landing Gear
 
 1. To assemble the landing gear, loosen the pre-assembled screws of the Landing Gear-Cross Bar and insert the Landing Gear-Vertical Pole and fasten the same.

diff --git a/en/frames_multicopter/index.md b/en/frames_multicopter/index.md
@@ -21,16 +21,16 @@ The linked sections instructions for assembling and configuring copter frames.
 
 ## Videos
 
-@[youtube](https://www.youtube.com/watch?v=LnUmYgAINBc&vq=hd720)
+<lite-youtube videoid="LnUmYgAINBc" title="3DR Iris + PX4ESC"/>
 
 DJI Flame Wheel 450 with Distance Sensor and RTK GPS (Pixhawk 3 Pro)
 
-@[youtube](https://www.youtube.com/watch?v=JovSwzoTepU)
+<lite-youtube videoid="JovSwzoTepU" title="PX4 terrain following"/>
 
 DJI Matrice 100 (Pixhawk 1)
 
-@[youtube](https://www.youtube.com/watch?v=3OGs0ONemGc)
+<lite-youtube videoid="3OGs0ONemGc" title="DJI Matrice 100 (Pixhawk 1)"/>
 
 QAV-R 5" KISS ESC Racer (Pixracer)
 
-@[youtube](https://youtu.be/wMYgqvsNEwQ)
+<lite-youtube videoid="wMYgqvsNEwQ" title="QAV-R 5 KISS ESC Racer (Pixracer)"/>
diff --git a/en/frames_multicopter/omnicopter.md b/en/frames_multicopter/omnicopter.md
@@ -117,7 +117,7 @@ Make sure the motors do not overheat with the changed settings.
 
 ## Video
 
-@[youtube](https://www.youtube.com/watch?v=nsPkQYugfzs)
+<lite-youtube videoid="nsPkQYugfzs" title="PX4 Based Omnicopter Using the New Dynamic Control Allocation in v1.13"/>
 
 ## Simulation
 

diff --git a/en/frames_multicopter/qav_r_5_kiss_esc_racer.md b/en/frames_multicopter/qav_r_5_kiss_esc_racer.md
@@ -9,7 +9,7 @@ Key information:
 - **Frame:** [Lumenier QAV-R 5"](http://www.getfpv.com/qav-r-fpv-racing-quadcopter-5.html)
 - **Flight controller:** [Pixracer](../flight_controller/pixracer.md)
 
-@[youtube](https://youtu.be/wMYgqvsNEwQ)
+<lite-youtube videoid="wMYgqvsNEwQ" title="QAV-R 5 PX4 FPV Racequad"/>
 
 ![QAV Racer complete](../../assets/airframes/multicopter/qav_r_5_kiss_esc_racer/preview.jpg)
 ![QAV Racer complete 2](../../assets/airframes/multicopter/qav_r_5_kiss_esc_racer/preview2.jpg)
@@ -46,7 +46,7 @@ These parts cover the sending side for standard FPV 5.8GHz analog FM video. You
 
 I assembled the basic center plate and the arms like shown in this video between 09:25 and 13:26:
 
-@[youtube](https://youtu.be/7SIpJccXZjM)
+<lite-youtube videoid="7SIpJccXZjM" title="How to Build a Lumenier QAV-R"/>
 
 I mounted the four motors to the frame with the cables coming out towards the center of the frame.
 I used two of the longer motor screws that come with the frame for each motor and put them in the two holes which are further apart.

diff --git a/en/frames_plane/index.md b/en/frames_plane/index.md
@@ -22,10 +22,17 @@ The linked sections instructions for assembling and configuring fixed-wing frame
 
 ## Videos
 
-@[youtube](https://www.youtube.com/watch?v=VqNWwIPWJb0&ab_channel=ChrisSeto)
 
-@[youtube](https://www.youtube.com/watch?v=vMFCi3G5s6E)
+<lite-youtube videoid="VqNWwIPWJb0" params="ab_channel=ChrisSeto" title="Reptile Dragon 2 Demo Flight For Px4 Log Review"/>
 
-@[youtube](https://youtu.be/1DUV7QjcXrA)
+---
 
-@[youtube](https://www.youtube.com/watch?v=8m4_NpTQn0E&vq=hd720)
+<lite-youtube videoid="vMFCi3G5s6E" title="PX4 Turbo Timber Spot Landing"/>
+
+---
+
+<lite-youtube videoid="1DUV7QjcXrA" title="Px4 Turbo timber Evolution Short Flight"/>
+
+---
+
+<lite-youtube videoid="8m4_NpTQn0E" title="Solar-powered 81 hour endurance world record flight"/>
diff --git a/en/frames_plane/reptile_dragon_2.md b/en/frames_plane/reptile_dragon_2.md
@@ -463,4 +463,4 @@ The RD2 flies well in this configuration and has plenty of room onboard for sens
 
 FPV video of flight log:
 
-@[youtube](https://www.youtube.com/watch?v=VqNWwIPWJb0&ab_channel=ChrisSeto)
+<lite-youtube videoid="VqNWwIPWJb0" params="ab_channel=ChrisSeto" title="Reptile Dragon 2 Demo Flight For Px4 Log Review"/>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -55,4 +55,4 @@ To install and configure PX4:

		## Video

		@[youtube](https://youtu.be/_-O0kv0Qsh4)
		<lite-youtube videoid="_-O0kv0Qsh4" title="PX4 running on the BetaFPV Whoop"/>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -287,4 +287,4 @@ To connect to Crazyflie 2.1 via MAVROS:

		## Flying

		@[youtube](https://www.youtube.com/watch?v=0qy7O3fVN2c)
		<lite-youtube videoid="0qy7O3fVN2c" title="Crazyflie 2.1 - PX4 Firmware (stabilized mode)"/>
-Original file line number
+Diff line change
@@ Expand Up @@
     :::
-    @[youtube](https://youtu.be/5xswOhhqrIQ)
+    <lite-youtube videoid="5xswOhhqrIQ" title="QGroundControl Autotune Feature Breakdown for PX4 Autopilot"/>
     ## Pre-tuning Test
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -463,4 +463,4 @@ The RD2 flies well in this configuration and has plenty of room onboard for sens

		FPV video of flight log:

		@[youtube](https://www.youtube.com/watch?v=VqNWwIPWJb0&ab_channel=ChrisSeto)
		<lite-youtube videoid="VqNWwIPWJb0" params="ab_channel=ChrisSeto" title="Reptile Dragon 2 Demo Flight For Px4 Log Review"/>