Component with custom video playlist.
The code to generate the component is this:
<!-- video playlist -->
<div class="video-playlist video-playlist-vertical video-playlist-danger">
<!-- video -->
<div class="video-player video-player-danger" 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">Title</span>
<span class="d-none" itemprop="description">Description</span>
<video crossorigin="anonymous" controls 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">
</video>
</div>
<!-- /video -->
<!-- list of videos -->
<div class="nav-container">
<!-- list of videos -->
<nav>
<ul>
<li title="Chapter 1: Character Design and Setup" data-toggle="tooltip" data-placement="left">
<a href="#" title="" itemprop="url" class="ui-box topBottom-leftRightCorner active-video video-playlist-item" data-video="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" data-type="video" data-index="0">
<span class="ui-border-element">
<img src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" alt="" itemprop="image" class="img-fluid">
</span>
<strong class="button-play"><i class="fa fa-play fa-2x"></i></strong>
<i>Chapter 1: Character Design and Setup</i>
</a>
</li>
<li title="Matrix Revolutions (Neo Vs Agent Smith) 1080p" data-toggle="tooltip" data-placement="left">
<a href="#" title="" itemprop="url" class="ui-box topBottom-leftRightCorner video-playlist-item" data-type="youtube" data-video="EBmH1M4DSSU" data-index="0">
<span class="ui-border-element">
<img src="https://img.youtube.com/vi/EBmH1M4DSSU/mqdefault.jpg" alt="" itemprop="image" class="img-fluid">
</span>
<strong class="button-play"><i class="fa fa-play fa-2x"></i></strong>
<i>Matrix Revolutions (Neo Vs Agent Smith) 1080p</i>
</a>
</li>
<li title="Faora-Ul vs Kal-El | Man of Steel" data-toggle="tooltip" data-placement="left">
<a href="#" title="" itemprop="url" class="ui-box topBottom-leftRightCorner video-playlist-item" data-type="youtube" data-video="zWTbLZCR84k" data-index="0">
<span class="ui-border-element">
<img src="https://img.youtube.com/vi/zWTbLZCR84k/mqdefault.jpg" alt="" itemprop="image" class="img-fluid">
</span>
<strong class="button-play"><i class="fa fa-play fa-2x"></i></strong>
<i>Faora-Ul vs Kal-El | Man of Steel</i>
</a>
</li>
<li title="Vimeo" data-toggle="tooltip" data-placement="left">
<a href="#" title="" itemprop="url" class="ui-box topBottom-leftRightCorner video-playlist-item" data-type="vimeo" data-video="374481655" data-index="0">
<span class="ui-border-element">
<img src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" alt="" itemprop="image" class="img-fluid">
</span>
<strong class="button-play"><i class="fa fa-play fa-2x"></i></strong>
<i>Vimeo</i>
</a>
</li>
</ul>
</nav>
<!-- /list of videos -->
</div>
<!-- /list of videos -->
</div>
<!-- /video playlist -->