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

<hapi-video controls="btn" cover muted autoplay loop="8:13" provider="native" embed-id="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></hapi-video>

<hapi-video controls cover muted autoplay loop="8:13" provider="vimeo" embed-id="175424978"></hapi-video>

<hapi-video controls cover muted autoplay loop="8:13" provider="youtube" embed-id="y3sILyOYEpg" embed-ratio="16:9"></hapi-video>