KWG Video Player

Custom HTML5 Video Player with Vanilla JavaScript
For the whole functionality of KWG Video Player, see documentation.

How to use

1. Load jQuery and include Modal box plugin files
<link rel="stylesheet" type="text/css" href="kwg-video-player.min.css" />
<script src="kwg-video-player.min.js"></script>
2. Set up your HTML
<video id="video1" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
3. Call the plugin
<script>
    new kwgVideo('#video1');
</script>
Open in a new window

Examples

Multiple video players
Multiple KWG Video Players on one page

Set up HTML
<video id="video-1" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
</video>
<video id="video-2" width="400" height="225"> 
    <source src="path/to/video" type="video/mp4">
</video>
<video id="video-3" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
</video>
Call the plugin
<script>
    new kwgVideo('#video-1');
    new kwgVideo('#video-2');
    new kwgVideo('#video-3');
</script>
Open in a new window
Autoplay video
Set up HTML
<video id="video-autoplay-1" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
</video>
Call the plugin
<script>
    new kwgVideo('#video-autoplay-1', {
        autoplay:true
    });
</script>

or

HTML video autoplay Attribute

Set up HTML
<video id="video-autoplay-2" width="400" height="225" autoplay>
    <source src="path/to/video" type="video/mp4">
</video>
Call the plugin
<script>
    new kwgVideo('#video-autoplay-2');
</script>

 
Repeat video
Set up HTML
<video id="video-repeat-1" width="400" height="225">
    <source src="path/to/video" type="video/mp4">
</video>
Call the plugin
<script>
    new kwgVideo('#video-repeat-1', {
        repeat:true
    });
</script>

or

HTML video loop Attribute

Set up HTML
<video id="video-repeat-2" width="400" height="225" loop>
    <source src="path/to/video" type="video/mp4">
</video>
Call the plugin
<script>
    new kwgVideo('#video-repeat-2');
</script>

 
Open in a new window
Github Download Documentation