Demo video by Lumatic
Default Ckin without overlay
Minimal Ckin with overlay
Compact Ckin with overlay
Compact Ckin with custom color
1. Add the ckin.css or ckin.min.css to head section to the head of your html page.
<link rel="stylesheet" href="dist/css/ckin.css">
</head>
2. Add the ckin.js or ckin.min.js to the bottom of your html page. Just above the closing BODY tag.
<script src="dist/js/ckin.js"></script>
</body>
3. Add your video element.
<video poster="ckin.jpg" src="ckin.mp4" data-overlay="1" data-title="The curious case of Chameleon..."></video>
Refresh your page. Thats, it.
Now all your video elements with automatically change. You dont' have to initiate anything.
Ckin player comes with many options.
data-ckin will change the ckin. Options : default, minimum, compact
data-ckin="compact"
data-color will change the color of the controls.
data-color="#fff000"
data-overlay will add an overlay to your video. Options: 1, 2
data-overlay="2"
poster is added to video cover.
poster="video-background-image"