LPA - Shield

I find the lack of documentation... disturbing 😏, don't you?

States
Javascript

Caption

Video De terrorismesectie van het Parijse Parket heeft het onderzoek overgenomen.


			
				<figure class="c-video js-video ">
	<div class="c-video__container">
		<div class="c-video__placeholder" style="background-image: url('/assets/images/general/video/placeholder.png')"></div>
		<div class="c-video__controls">
			<button class="c-video__button">
				<div class="c-icon c-video__play">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						<path id="Path" d="M0.1,0.4V24l23.9-12.1L0.6,0C0.4-0.1,0.2,0,0.1,0.2C0.1,0.3,0.1,0.3,0.1,0.4z" />
					</svg>
				</div>
			</button>
		</div>
		<video class="c-video__source">
			<source src="/assets/videos/general/placeholder.mp4" type="video/mp4" />
		</video>
	</div>
	<figcaption class="c-caption c-video__caption">
		<span class="c-caption__type">Video</span>
		<span class="c-caption__content">De terrorismesectie van het Parijse Parket heeft het
			onderzoek overgenomen.</span>
	</figcaption>
</figure>

Default


			
				<div class="c-video js-video ">
	<div class="c-video__container">
		<div class="c-video__placeholder" style="background-image: url('/assets/images/general/video/placeholder.png')"></div>
		<div class="c-video__controls">
			<button class="c-video__button">
				<div class="c-icon c-video__play">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
						<path id="Path" d="M0.1,0.4V24l23.9-12.1L0.6,0C0.4-0.1,0.2,0,0.1,0.2C0.1,0.3,0.1,0.3,0.1,0.4z" />
					</svg>
				</div>
			</button>
		</div>
		<video class="c-video__source">
			<source src="/assets/videos/general/placeholder.mp4" type="video/mp4" />
		</video>
	</div>
</div>

Documentation

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.