Modern HTML5 Responsive Video Player

Skins

Installation

1. Add the style.css to head section to the head of your HTML page.

<link rel="stylesheet" href="assets/css/style.css">
</head>

2. Add the script.js to the bottom of your HTML page. Just above the closing BODY tag.

<script src="assets/js/script.js"></script>
</body>

3. Add your video element.

<video poster="assets/img/screen1.jpg" src="assets/videos/1.mp4" data-overlay="1"></video>

That's all!

Customization

We have 18 styles options for you.

You have 6 different controls styles to choose. Options : default, minimum, compact, Default and Compact, Compact Dark, Midimal Dark

data-color will change the color of the controls.

data-color="#fff000"

data-overlay will add an overlay to your video. Options: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11

data-overlay="11"

poster is added to video cover.

poster="video-background-image"