Video

The video component is used to display an HTML5 <video> element with a custom play button.

Default

px 

			
				<div class="a-video js-video  ">
	<div class="a-video__controls">
		<button class="a-video__play"></button>
	</div>
	<video class="a-video__source">
		<source src="/assets/videos/cevora.mp4" type="video/mp4" />
		<source src="/assets/videos/cevora.ogg" type="video/ogg" />
	</video>
</div>

With poster

The video element can have a poster image that will be shown while the video is downloading. In this case, the video will have a semi transparent overlay instead of the default purple background.

  • a-video--with-poster
px 

			
				<div class="a-video js-video a-video--with-poster ">
	<div class="a-video__controls">
		<button class="a-video__play"></button>
	</div>
	<video class="a-video__source" poster="/assets/images/video/poster.png">
		<source src="/assets/videos/cevora.mp4" type="video/mp4" />
		<source src="/assets/videos/cevora.ogg" type="video/ogg" />
	</video>
</div>

Documentation

Modifiers

  • a-video--with-poster

    Changes the default background color to make the poster image visible

States

  • is-playing

    Used to indicate that the video has started playing, hide the play button and disable any custom controls

JavaScript

  • js-video

    Indicate the use of JavaScript, mainly to make the custom play button work