Fix videos in tabs and add guide (TheThingsIndustries#1412)

KrishnaIyer · web-flow · commit aab8ed229f19 · 2025-03-06T15:35:46.000+01:00
* doc: Fix video in tabs

* doc: Add guide on embedding videos
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -132,6 +132,24 @@ Please respect the following guidelines for content in our documentation site.
   - If a line is longer than 120 columns, insert a line break
   - In very special cases, longer lines are tolerated
 
+## Embedding YouTube Videos
+
+In most cases, YouTube videos can be embedded using it's unique ID. You can fetch this from the last part of the video's URL. For example, the unique ID for the video [https://youtu.be/vxXKBEQxLq0](https://youtu.be/vxXKBEQxLq0) is `vxXKBEQxLq0`.
+
+You can embed this in markdown directly using
+
+```md
+<details><summary>Show video</summary>
+{{< youtube "vxXKBEQxLq0" >}}  <!-- Replace the content in the quotes with your video ID-->
+</details>
+```
+
+However, if the video should be inside a `tab` container use the special `tabs/video` short code. Example below:
+
+```md
+{{< tabs/video "vxXKBEQxLq0" >}} <!-- Replace the content in the quotes with your video ID-->
+```
+
 ## Building Frequency Plans Documentation
 
 The [Frequency Plans](https://github.com/TheThingsIndustries/lorawan-stack-docs/blob/master/doc/content/concepts/features/lorawan/frequency-plans/_index.md) section contains all frequency plans that are officially supported by {{% tts %}}. The list of frequency plans is populated from the [LoRaWAN Frequency Plans for {{% tts %}} Github repository](https://github.com/TheThingsNetwork/lorawan-frequency-plans/). To update the list of frequency plans with the newest changes from the Frequency Plans repository, run `make freq.deps`.
diff --git a/doc/content/concepts/advanced/user-management/_index.md b/doc/content/concepts/advanced/user-management/_index.md
@@ -14,7 +14,7 @@ This section explains how to manage users and organizations, and how to grant ri
 
 <!--more-->
 
-In addition to the written instructions linked below, a video with instructions for managing collaborator rights is available on [The Things Network youtube channel](https://youtu.be/-m5rULfP1yg).
+In addition to the written instructions linked below, a video with instructions for managing collaborator rights is available on [The Things Industries youtube channel](https://youtu.be/-m5rULfP1yg).
 
 <details><summary>Show video</summary>
 {{< youtube "-m5rULfP1yg" >}}
diff --git a/doc/content/concepts/advanced/user-management/rights/_index.md b/doc/content/concepts/advanced/user-management/rights/_index.md
@@ -20,11 +20,9 @@ This section contains instructions for managing rights.
 
 ## Managing Rights using the Console
 
-In addition to the written instructions linked below, a video with instructions for managing collaborator rights is available on [The Things Network youtube channel](https://youtu.be/-m5rULfP1yg).
+In addition to the written instructions linked below, a video with instructions for managing collaborator rights is available on [The Things Industries youtube channel](https://youtu.be/-m5rULfP1yg).
 
-<details><summary>Show video</summary>
-{{< youtube "-m5rULfP1yg" >}}
-</details>
+{{< tabs/video "-m5rULfP1yg" >}}
 
 Gateways, End Devices, and Applications have a **Collaborators** tab which allows you to specify rights for users or organizations on that entity. To manage collaborators, click the **Collaborators** tab in the left hand menu.
 
diff --git a/doc/content/concepts/advanced/user-management/user/_index.md b/doc/content/concepts/advanced/user-management/user/_index.md
@@ -36,11 +36,9 @@ You can search for users by ID using the search field above the list of users. I
 
 ### Creating Users
 
-See the following video from [The Things Network youtube channel](https://youtu.be/vxXKBEQxLq0) for instructions to create a user in the console.
+See the following video from [The Things Industries youtube channel](https://youtu.be/vxXKBEQxLq0) for instructions to create a user in the console.
 
-<details><summary>Show video</summary>
-{{< youtube "vxXKBEQxLq0" >}}
-</details>
+{{< tabs/video "vxXKBEQxLq0" >}}
 
 ### Inviting Users
 
diff --git a/doc/content/concepts/features/events/_index.md b/doc/content/concepts/features/events/_index.md
@@ -15,7 +15,7 @@ This guide shows how to view events in the console and to subscribe to events wi
 
 It is possible to view live events for an entire application, gateway, or specific end device in the console.
 
-See the following video from [The Things Network youtube channel](https://youtu.be/PbYzyqoJf5Q) for instructions.
+See the following video from [The Things Industries youtube channel](https://youtu.be/PbYzyqoJf5Q) for instructions.
 
 <details><summary>Show video</summary>
 {{< youtube "PbYzyqoJf5Q" >}}
diff --git a/doc/content/concepts/features/lorawan/fuota/_index.md b/doc/content/concepts/features/lorawan/fuota/_index.md
@@ -46,8 +46,6 @@ Using multiple gateways for updating firmware on the same group of end devices i
 
 ## Useful Links
 
-A test FUOTA server compatible with {{% tts %}} can be found [here](https://github.com/elsalahy/test-fuota-server).
-
 For a beginners guide on using multicast and FUOTA, check out [this video](https://www.youtube.com/watch?v=UIF5cOpLZxE).
 
 Regarding devices that implement FUOTA, we recommend you to check out our [Generic Node](https://www.genericnode.com/docs/).
diff --git a/doc/content/enterprise/docker/_index.md b/doc/content/enterprise/docker/_index.md
@@ -1,10 +1,13 @@
 ---
 title: "Docker"
 description: ""
-distributions: ["Enterprise", "Open Source"]
 weight: 4
 aliases:
-  [/getting-started/installation, /the-things-stack/host/docker/installation, /the-things-stack/host/docker]
+  [
+    /getting-started/installation,
+    /the-things-stack/host/docker/installation,
+    /the-things-stack/host/docker,
+  ]
 ---
 
 This is a guide for installing {{% tts %}} Enterprise or Open Source on your own hardware using Docker, to run your own private LoRaWAN® network server.
@@ -21,7 +24,7 @@ For highly available production cloud deployments with high throughput, we recom
 
 Continue following these instructions to run {{% tts %}} Enterprise or Open Source on your own hardware, using Docker.
 
-In addition to the following written instructions, video instructions for installing {{% tts %}} are available on [The Things Network youtube channel](https://www.youtube.com/watch?v=DcmgJMvMfZc).
+In addition to the following written instructions, video instructions for installing {{% tts %}} are available on [The Things Industries youtube channel](https://www.youtube.com/watch?v=DcmgJMvMfZc).
 
 <details><summary>Show video</summary>
 {{< youtube "DcmgJMvMfZc" >}}
diff --git a/doc/content/enterprise/docker/configuration/index.md b/doc/content/enterprise/docker/configuration/index.md
@@ -13,7 +13,7 @@ This guide shows an example of configuring {{% tts %}} using configuration files
 
 If configuring {{% tts %}} as `localhost` on a machine with no public IP or DNS address, see the [`localhost`](#running-the-things-stack-as-localhost) section.
 
-In addition to the written instructions below, video instructions for installing {{% tts %}} are available on [The Things Network youtube channel](https://www.youtube.com/watch?v=DcmgJMvMfZc).
+In addition to the written instructions below, video instructions for installing {{% tts %}} are available on [The Things Industries youtube channel](https://www.youtube.com/watch?v=DcmgJMvMfZc).
 
 <details><summary>Show video</summary>
 {{< youtube "DcmgJMvMfZc" >}}
@@ -319,7 +319,7 @@ Once you have configured `docker-compose.yml` and `ttn-lw-stack-docker.yml` as s
 
 Follow this section if you are configuring and running {{% tts %}} on a local machine with no public IP or DNS address.
 
-In addition to the written instructions below, video instructions for installing on `localhost` are available on [The Things Network youtube channel](https://www.youtube.com/c/TheThingsNetworkCommunity).
+In addition to the written instructions below, video instructions for installing on `localhost` are available on [The Things Industries youtube channel](https://www.youtube.com/c/TheThingsNetworkCommunity).
 
 <details><summary>Show video</summary>
 {{< youtube "Owm5IUtQTx8" >}}
diff --git a/doc/content/hardware/devices/adding-devices/adding-devices-in-bulk/_index.md b/doc/content/hardware/devices/adding-devices/adding-devices-in-bulk/_index.md
@@ -82,11 +82,9 @@ If the import was successful, you will see your devices added to the list of end
 
 {{< figure src="successful-import.png" alt="successful-import" >}}
 
-See the following video from [The Things Network youtube channel](https://youtu.be/ouz-VuiosU4) for instructions.
+See the following video from [The Things Industries youtube channel](https://youtu.be/ouz-VuiosU4) for instructions.
 
-<details><summary>Show video</summary>
-{{< youtube "ouz-VuiosU4" >}}
-</details>
+{{< tabs/video "ouz-VuiosU4" >}}
 
 ## Claim devices using Claim Authentication Code
 
diff --git a/doc/content/integrations/adding-applications/_index.md b/doc/content/integrations/adding-applications/_index.md
@@ -25,11 +25,9 @@ Users have the freedom to select which devices are part of an application. Each
 
 #### Adding Applications using the Console
 
-In addition to the written instructions below, a video with instructions for adding an application is available on [The Things Network youtube channel](https://youtu.be/403yK_RaONE).
+In addition to the written instructions below, a video with instructions for adding an application is available on [The Things Industries youtube channel](https://youtu.be/403yK_RaONE).
 
-<details><summary>Show video</summary>
-{{< youtube "403yK_RaONE" >}}
-</details>
+{{< tabs/video "403yK_RaONE" >}}
 
 Go to **Applications** in the top menu, and click **+ Add Application** to reach the application registration page. Fill the application ID. The other fields are optional.
 
diff --git a/doc/content/integrations/payload-formatters/_index.md b/doc/content/integrations/payload-formatters/_index.md
@@ -10,7 +10,7 @@ Payload formatters allow you to process data going to and from end devices. This
 
 This section explains how to set up payload formatters for a specific end device or an entire application.
 
-In addition to the written instructions linked below, a video with instructions for creating JavaScript and device repository payload formatters is available on [The Things Network YouTube channel](https://youtu.be/4tii7MiD-yM).
+In addition to the written instructions linked below, a video with instructions for creating JavaScript and device repository payload formatters is available on [The Things Industries youtube channel](https://youtu.be/4tii7MiD-yM).
 
 <details><summary>Show video</summary>
 {{< youtube "4tii7MiD-yM" >}}
diff --git a/doc/content/integrations/webhooks/creating-webhooks.md b/doc/content/integrations/webhooks/creating-webhooks.md
@@ -8,7 +8,7 @@ This section provides instructions for creating a webhook in the console.
 
 <!--more-->
 
-In addition to the written instructions linked below, a video with instructions for creating webhooks is available on [The Things Network youtube channel](https://youtu.be/trNIzIf3TZo).
+In addition to the written instructions linked below, a video with instructions for creating webhooks is available on [The Things Industries youtube channel](https://youtu.be/trNIzIf3TZo).
 
 <details><summary>Show video</summary>
 {{< youtube "trNIzIf3TZo" >}}
diff --git a/doc/themes/the-things-stack/layouts/shortcodes/tabs/video.html b/doc/themes/the-things-stack/layouts/shortcodes/tabs/video.html
@@ -0,0 +1,24 @@
+<details>
+  <summary>Show video</summary>
+  <div
+    style="
+      position: relative;
+      padding-bottom: 56.25%;
+      height: 0;
+      overflow: hidden;
+    "
+  >
+    <iframe
+      src="https://www.youtube.com/embed/{{ .Get 0 }}"
+      style="
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+      "
+      allowfullscreen
+    ></iframe>
+  </div>
+</details>
