Works
動画
クラスc-videoを付与した要素（ここではfigure要素）の中に、video要素を包括した.wrap要素と、停止中のサムネイル画像を包括した.poster要素を入れる。video要素には動画メディアのサイズを記述し、source要素でふたつのフォーマット（webm、mp4）で動画を用意。
video要素にクラスjs-videoを付与し、.poster要素にはクラスjs-videoControlを付与。互いにdata-video属性で「ユニークな同じ値（ここではsampleVideo）」を指定し紐付ける。
再生する
<div class="c-video">
<div class="wrap">
<video width="640" height="360" class="js-video" data-video="sampleVideo">
<source src="https://lopan.cafe/assets/media/video.webm" type="video/webm">
<source src="https://lopan.cafe/assets/media/video.mp4" type="video/mp4">
</video>
</div>
<div class="poster js-videoControl" data-video="sampleVideo">
<img src="../../assets/media/poster.webp" alt="" width="640" height="360" loading="lazy">
<span class="play">再生する</button>
</div>
</div>
仕組み
.js-videoを付与したvideo要素と、.js-videoControlを付与したなんらかの要素が、data-video属性で紐付いていれば機能するので、例えばここをクリックしても再生/停止できる。
<p><code>.js-video</code>を付与したvideo要素と、<code>.js-videoControl</code>を付与したなんらかの要素が、<b>data-video属性</b>で紐付いていれば機能するので、例えば<span class="c-textlink js-videoControl" data-video="columnVideo" aria-label="動画の再生/停止切り替え">ここをクリック</span>しても再生/停止できる。</p>
<video width="640" height="360" class="js-video" data-video="columnVideo">
<source src="https://lopan.cafe/assets/media/video.webm" type="video/webm">
<source src="https://lopan.cafe/assets/media/video.mp4" type="video/mp4">
</video>
動画だけ設置したい
動画だけでいいなら、video要素を設置して、controles属性を指定するとよい。controls属性を指定すれば、ブラウザ依存の動画UIが表示される。
<video controls width="640" height="360">
<source src="https://lopan.cafe/assets/media/video.webm" type="video/webm">
<source src="https://lopan.cafe/assets/media/video.mp4" type="video/mp4">
</video>