Adding a video to the Fleet docs (#7081)

* Adding a video to the Fleet docs

These instructions make sure embedded YouTube videos display correctly on mobile.

* Add files via upload

- uploaded video embed guide gif

* Update handbook/community/README.md

- added a gif to show how to find the YouTube video embed URL

* Updated image link in community/README.md

updated image link

Co-authored-by: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
Co-authored-by: Mike Thomas <mthomas@fleetdm.com>
This commit is contained in:
Chris McGillicuddy 2022-08-15 09:01:11 -05:00 committed by GitHub
parent a6f45946c6
commit 8c0f35d264
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 0 deletions

View file

@ -244,6 +244,31 @@ The images used in the docs live in `docs/images/`. Note that you must provide t
> Note that the instructions above also apply to adding images in the Fleet handbook.
### Adding a video to the Fleet docs
You can embed a video at the top of a doc page. The video must be uploaded to YouTube first. Using the standard YouTube embed code causes issues on mobile. So, we wrote our own code to make sure the video fits every screen size.
Copy and paste this code where you want to embed the video in the doc.
```
<div purpose=”embedded-content”>
<iframe class="video" src="YOUTUBE EMBED URL GOES HERE" allowfullscreen></iframe>
</div>
```
Youll notice a section to enter the YouTube embed URL. Heres how to find it:
1. Open the YouTube video in your browser.
2. Click **Share** (located below the title).
3. Select the **Embed** option.
4. Copy the URL from the embed code.
Youll know you have the right URL if you see “embed” after the domain.
Paste the YouTube embed URL in the code we provided.
![How to find YouTube video embed URL](https://raw.githubusercontent.com/fleetdm/fleet/1fec06c689c45e65cbb4d71db946690bbdc78cbb/website/assets/images/handbook-video-embed-guide-1280x720.gif)
### Adding a mermaid diagram to the Fleet Docs
The Fleet Docs support diagrams that are written in mermaid.js syntax. Take a look at the [Mermaid docs](https://mermaid-js.github.io/mermaid/#/README) to learn about the syntax language and what types of diagrams you can display.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB