How to add native videos

In case you want to host your videos directly in your website without relying on Youtube or other third parties this is how to do it.

# The Hugo Video component

You can use this guide

To summarize

Add the hugo-video as a submodule to be able to get upstream changes later

 git submodule add https://github.com/martignoni/hugo-video.git themes/hugo-video

Add hugo-video as the left-most element of the theme list variable in your site’s or theme’s configuration file config.yaml or config.toml. Example, with config.yaml:
```
 theme: ["hugo-video", "my-theme"] 
```
or, with config.toml,
```
 theme = ["hugo-video", "my-theme"] 
```
Place your video file(s) in the page bundle of your post.
In your site, use the shortcode, this way, indicating the video filename without its extension. If your video file is my-beautiful-screencast.mp4, type this:
```
 {{<  video src="my-beautiful-screencast" >}} 
```

# Config

# Poster

If you want to use a poster you just need to place an image with an image extension in the same page folder using the same filename of the video. Continuing the example from before you will place a file called my-beautiful-screencast.jpeg or my-beautiful-screencast.png and it will show up as a video preview instead of the first frame of the video

# Multiple Video Types

The component will include various video sources to improve browser compatibility. You just need to provide the videos with different extensions and keeping the same filename.

To summarize your folder should look like this:

$ tree post-folder
post-folder
├── index.md
└── my-beautiful-screencast.mp4

But if you want to add poster and multiple video types you just need to:

$ tree post-folder
post-folder
├── index.md
├── my-beautiful-screencast.jpeg
├── my-beautiful-screencast.hevc.mp4
├── my-beautiful-screencast.mp4
├── my-beautiful-screencast.av1.webm
└── my-beautiful-screencast.webm

# Width

 {{<  video src="my-beautiful-screencast" width="600px" >}}

# Height

 {{<  video src="my-beautiful-screencast" height="200px" >}}

# Muted

 {{<  video src="my-beautiful-screencast" muted="true" >}}

# Controls

 {{<  video src="my-beautiful-screencast" controls="false" >}}

# Autoplay

 {{<  video src="my-beautiful-screencast" autoplay="true" >}}

# Loop

 {{<  video src="my-beautiful-screencast" loop="true" >}}

# GIF mode

By using loop, autoplay, no controls and mute we can use our video like a GIF

 {{<  video src="my-beautiful-screencast" loop="true" autoplay="true" controls="false"  muted="true"  >}}

We can also use the faster gif shortcode

 {{<  gif "my-beautiful-screencast"  >}}

# Preload

The preload tag will default to metadata unless specified otherwise. The other values are none and auto.

 {{<  video src="my-beautiful-screencast" preload="auto" >}}

 {{<  video src="my-beautiful-screencast" preload="none" >}}

Pyxill 2