GRT JS Video Player

A free JavaScript HTML5 video player focused on performance, simplicity, and modern browser support.

It provides configurable playback features such as cover images, aspect ratios, autoplay, fullscreen, picture-in-picture (PiP), custom controls, and customizable UI behavior. Full documentation and examples are available below.

Current Version: 2.0
Release Date: 24 January 2026

Changelog:

Added support for cover images
Added a play icon overlay displayed on top of the player when the video is paused
The progress bar now supports dragging via mouse and touch input, in addition to click-based seeking
Removed the volume control on unsupported devices (iPhone and iPad)
Complete code rewrite with improved overall performance
Improved accessibility structure and HTML semantic alignment

Demo

Installation

1- Include the player stylesheet file: grt-js-video-player.css inside the <head> tag.

<link rel="stylesheet" href="grt-js-video-player.css">

2- Include the JavaScript file grt-js-video-player.js inside the <body> tag.

<script src="grt-js-video-player.js"></script>

3- Add the following div element inside your document <body> and update the grtvideoplayer-url and grtvideoplayer-cover attributes.

<div grtvideoplayer-url="https://example.com/video.mp4"
 grtvideoplayer-cover="https://example.com/cover.jpg">
</div>

4- Initialize the player once after the DOM is loaded. You can keep the global init simple and use per-element HTML attributes for configuration.

<script>
document.addEventListener("DOMContentLoaded", function () {
	grtVideoPlayer.init();
});
</script>

Global Options:

This approach allows you to define default parameters for multiple video players on the same page. These parameters are applied when individual attributes within each video container are not specified (for example you use can the same cover image or aspect ratio across all videos).

<script>
document.addEventListener("DOMContentLoaded", function () {
	grtVideoPlayer.init({ 
		coverImageUrl:"./cover-example.jpg", // Accepted values: Image Url. Default: not set.
		aspectRatio: "16x9", // Accepted values: 16x9, 1x1 , 4x3, 5x4, 3x2, 21x9, 9x16, 3x4, 4x5, 2x3. Default: 16x9.
		controls: true, // Accepted values: true or false. Default: true.
		clickToPlay: true, // Accepted values: true or false. Default: true.
		autoPlay: false, // Accepted values true or false. Default: false. 
		muted: false, // Accepted values true or false. Default: false.
		volume:90, // Accepted values: from 0 to 100. Default: 85.
		fullScreenButton: true, // Accepted values: true or false. Default: true.
		pipButton: true, // Accepted values: true or false. Default: true. 
		speedButton: true, // Accepted values: true or false. Default: true.
	});
});
</script>

Cover Image

Defines the image displayed as the video’s cover before playback starts. When the cover parameter is not provided in the HTML, a black background is shown in place of the cover image.

Attribute name: grtvideoplayer-cover
Supported values: URL to an image file
Default value: not set

<div
 grtvideoplayer-url="https://example.com/video.mp4"
 grtvideoplayer-cover="https://example.com/cover.jpg">
</div>

Aspect Ratio

Defines the video’s display aspect ratio.

Attribute name: grtvideoplayer-aspect
Supported values: 16x9, 1x1, 4x3, 5x4, 3x2, 21x9, 9x16, 3x4, 4x5, 2x3.
Default value: 16x9.

<div
 grtvideoplayer-url="https://example.com/video.mp4"
 grtvideoplayer-cover="https://example.com/cover.jpg"
 grtvideoplayer-aspect="4x3">
</div>

Controls

Toggles the visibility of the video controls.

Attribute name: grtvideoplayer-controls
Accepted values: true / false.
Default value: true.

<div
 grtvideoplayer-url="https://example.com/video.mp4"
 grtvideoplayer-cover="https://example.com/cover.jpg"
 grtvideoplayer-controls="false">
</div>

Click To Play

Enables click-to-play behavior across the entire video container.

Attribute name: grtvideoplayer-clicktoplay
Accepted values: true / false.
Default value: true.

<div
 grtvideoplayer-url="https://example.com/video.mp4"
 grtvideoplayer-cover="https://example.com/cover.jpg"
 grtvideoplayer-clicktoplay="false">
</div>

AutoPlay

Enables or disables automatic playback when the video loads.

Attribute name: grtvideoplayer-autoplay
Accepted values: true / false.
Default value: true.
Note: On many browsers and mobile devices, autoplay is only allowed when the video is muted.

<div
 grtvideoplayer-url="https://example.com/video.mp4"
 grtvideoplayer-cover="https://example.com/cover.jpg"
 grtvideoplayer-autoplay="true">
</div>

Muted

Determines whether the video starts with audio muted.

Attribute name: grtvideoplayer-muted
Accepted values: true / false.
Default value: true.

<div
 grtvideoplayer-url="https://example.com/video.mp4"
 grtvideoplayer-cover="https://example.com/cover.jpg"
 grtvideoplayer-muted="true">
</div>

Volume

Sets the initial audio volume level.

Attribute name: grtvideoplayer-volume
Accepted values: number from 0 to 100.
Default value: 85.
Note: The volume slider will be hidden on iOS devices because iOS does not allow programmatic volume control for HTML5 videos. Volume can only be adjusted using the device's hardware buttons.

<div
 grtvideoplayer-url="https://example.com/video.mp4"
 grtvideoplayer-cover="https://example.com/cover.jpg"
 grtvideoplayer-volume="75">
</div>

FullScreen Button

Controls the visibility of the fullscreen button in the player controls.

Attribute name: grtvideoplayer-fullscreen
Accepted values: true / false.
Default value: true.

<div
 grtvideoplayer-url="https://example.com/video.mp4"
 grtvideoplayer-cover="https://example.com/cover.jpg"
 grtvideoplayer-fullscreen="false">
</div>

PiP Button

Controls the availability of the Picture-in-Picture (PiP) button.

Attribute name: grtvideoplayer-pip
Accepted values: true / false.
Default value: true.

<div
 grtvideoplayer-url="https://example.com/video.mp4"
 grtvideoplayer-cover="https://example.com/cover.jpg"
 grtvideoplayer-pip="false">
</div>

Speed Button

Controls the visibility of the playback speed selector.

Attribute name: grtvideoplayer-speed
Accepted values: true / false.
Default value: true.

<div
 grtvideoplayer-url="https://example.com/video.mp4"
 grtvideoplayer-cover="https://example.com/cover.jpg"
 grtvideoplayer-speed="false">
</div>