We are working on something new! Check it out here!

HTML 5 Audio player

JavaScript dependent Video player.

Example

<div class="audio-player">
 <audio controls controlsList="nodownload">
     <source src="/dist/audio/test2.mp3" type="audio/mpeg">
 </audio>
 <div class="album-art" style="background-image: url('https://picsum.photos/50/50?image=996');">
     <a href="#play" class="toggle-action-play pricon pricon-play"></a>
     <a href="#play" class="toggle-action-pause pricon pricon-pause"></a>
 </div>
 <input type="range" class="action-seek" value="0" max="100" step="0.01"/>
</div>
<div class="audio-player">
 <audio controls controlsList="nodownload">
     <source src="/dist/audio/test2.mp3" type="audio/mpeg">
 </audio>
 <div class="album-art" style="background-image: url('https://picsum.photos/50/50?image=837');">
     <a href="#play" class="toggle-action-play pricon pricon-play"></a>
     <a href="#play" class="toggle-action-pause pricon pricon-pause"></a>
 </div>
 <input type="range" class="action-seek" value="0" max="100" step="0.01"/>
</div>
Source file: ~/source/sass/components/audio/audio.scss

Video Player

JavaScript dependent Video player.

Example

<div class="player ratio-16-9" style="background-image:url('https://unsplash.it/800/800/?image=890');">
    <a href="#video-player-GQxqaoJNx_E" data-video-id="GQxqaoJNx_E" data-unavailable="Video playback unavailable, activate enable JavaScript to enable."></a>
</div>
<div class="player ratio-16-9" style="background-image:url('https://unsplash.it/800/800/?image=892');">
    <a href="#video-player-101935278" data-video-id="101935278" data-unavailable="Video playback unavailable, activate enable JavaScript to enable."></a>
</div>
Source file: ~/source/sass/components/player/_player.scss