Back to the list

Video

Container for videos. Be careful, the HTML 5 autoplay function only works with the sound off.

File to include

@import "components/video";

HTML video with controls

<video controls>
    <source src="/assets/images/video-html.mp4" />
    Your browser doesn't support the video tag.
</video>

HTML video with autoplay

<video autoplay muted loop>
    <source src="/assets/images/video-html.mp4" />
    Your browser doesn't support the video tag.
</video>

YouTube video

<iframe src="https://www.youtube.com/embed/XEfDYMngJeE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="youtube"></iframe>

Attributes

Name Example value Possible values Default Required
data-fit contain "fill" | "contain" | "cover" | "none" | "scale-down" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" None No