# video

The markup of every demo on <https://kuiper.oeds.it/video/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## video

Varies: 12 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><div data-video=""><video class="width-1-1" width="480" height="270" controls muted playsinline><source src="/videos/video.mp4" type="video/mp4"><source src="/videos/video.ogg" type="video/ogg"></video></div><p class="background-muted text-center">default</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><div data-video="autoplay: false;"><video class="width-1-1" width="480" height="270" controls muted playsinline><source src="/videos/video.mp4" type="video/mp4"><source src="/videos/video.ogg" type="video/ogg"></video></div><p class="background-muted text-center">autoplay false</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><div data-video="autoplay: hover;"><video class="width-1-1" width="480" height="270" controls muted playsinline><source src="/videos/video.mp4" type="video/mp4"><source src="/videos/video.ogg" type="video/ogg"></video></div><p class="background-muted text-center">autoplay hover</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><div data-video="autoplay: inview;"><video class="width-1-1" width="480" height="270" controls muted playsinline><source src="/videos/video.mp4" type="video/mp4"><source src="/videos/video.ogg" type="video/ogg"></video></div><p class="background-muted text-center">autoplay inview</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><div data-video="automute: true;"><video class="width-1-1" width="480" height="270" controls muted playsinline><source src="/videos/video.mp4" type="video/mp4"><source src="/videos/video.ogg" type="video/ogg"></video></div><p class="background-muted text-center">automute</p></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><div data-video="restart: true;"><video class="width-1-1" width="480" height="270" controls muted playsinline><source src="/videos/video.mp4" type="video/mp4"><source src="/videos/video.ogg" type="video/ogg"></video></div><p class="background-muted text-center">restart</p></div></div>
</div>
```