Component with custom video player.
The code to generate the component is this:
<h2>MP4</h2>
<div class="video-player" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="duration" content="T1M33S">
<meta itemprop="thumbnail" content="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg">
<span class="d-none" itemprop="name">Video title</span>
<span class="d-none" itemprop="description">Video description</span>
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player01" class="uikit-video-player">
<!-- Video files -->
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440">
<!-- Fallback for browsers that don't support the <video> element -->
<a href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4">Download</a>
</video>
</div>
<h2 class="mt-5">YouTube</h2>
<div class="video-player video-player-warning" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="duration" content="T1M33S">
<meta itemprop="thumbnail" content="https://img.youtube.com/vi/EBmH1M4DSSU/0.jpg">
<span class="d-none" itemprop="name">Video title</span>
<span class="d-none" itemprop="description">Video description</span>
<div id="player03" data-plyr-provider="youtube" data-plyr-embed-id="EBmH1M4DSSU" class="uikit-video-player"></div>
</div>