# Hapi-Video HTMLElement
An easy way to integrate video on your page from various providers
- Native (webm, hls, mp4)
- Youtube
- Viméo
## Settings
Various settings can be set through DOM attributes
- ``controls``
Display a control bar (play/pause, progress bar and volume control) on hover
*This attribute value can be set to **"btn"** to display only 2 big button play/pause and mute/umnute over the video*
- ``cover``
Enable background cover mode for the video
- ``autoplay``
Play the video when ready
- ``muted``
Mute the sound at startup (allways on in autoplay mode)
- ``loop``
If set, the play will play an infinite video loop
*You can set this attribute with a ``start:stop`` tag to play only a part of the video. Eg: 10:30 will play the 20s part starting at 10s and endind at 30s*
- ``provider``
Define the provider for the play *[native|youtube|vimeo]*
- ``embed-id``
Media reference for the provider *(native provider espect a video file path/url)*
- ``embed-ratio``
Youtube do not allow us to retrieve the real video aspect ratio so you can indicate the video aspect ratio manualy using this attribute.
In **cover** mode, the player use this information to adjust the video overlay.
*The default aspect ratio value is ``16:9``*
# Integration samples
[Sample integration on CodePen](https://codepen.io/ldbglobe/full/poVPaVP)
```html
```
```html
```
```html
```