Add video player from Html5 Video Player > Add New Player. You will see the player in the Gutenberg editor.
First, select a video type: Video, Youtube, or Vimeo. For Video upload Video or insert Video URL, for Youtube insert Youtube video URL, for Vimeo insert Vimeo video URL.
Select the block, you will see the settings option in the right sidebar. There are three options, Settings, Controls, and Style.
Sources: You can set video and poster, and also can set the download URL by enabling the Custom Download URL option.
Options: Enable or disable Repeat, Autoplay, Muted, Sticky On Scroll, Pause, Reset On End, Auto Hide Control, Show or hide thumbnail on pause. And set Seek Time, Start Time, Preload, Password Protected, and Google VAST Tag URL.
Set different chapters for the video from here.
Add branding logo or text on video overlay. Also, set the position of overlay content.
By enabling this show text or anchor text after the video ends.
Popup, Watermark & Additional
Popup: Enable to play video in a popup by clicking a poster or button.
Watermark: Show a watermark when playing like user email, name, or custom text, and color it.
Additional: Add Player ID, and add additional CSS.
Go to the Controls tab beside the Settings tab. From here you can show/hide the video player controls like Play Large, Restart, Rewind, Play, Fast Forward, Progress, Current Time, Duration, Mute, Volume, PIP, Airplay, Settings, Download, and Fullscreen.
Go to the Style tab beside the Controls tab to set the width and rounded corner value of the video player.
First, disable Gutenberg Shortcode Generator to enable Classic Editor. After setup, add or edit Player from the Html5 Video Player menu. Here you will find the settings for the player:
After all the settings save the player, copy and paste the shortcode where you want to show the player.
ShortCode Classic- Configure
There are various options to configure the video player!
Select a video source: Library or CDN source, YouTube, Vimeo, or from AWS S3 File Manager
Set video and thumbnail sources. Also, set the download URL by enabling the Custom Download URL option if want a custom file download.
You can stream in the video player.
To stream video from the server, first, you have to enable the streaming option. It supports Hls.js and Dash.js
Paste the streaming source and also add a thumbnail.
Under the sources you will see the options:
- Video Start Time – set a starting time for the video
- Enable Thumbnail when video pause – to display the thumbnail when the video is paused.
- Enable Popup – enable Popup to open this video as a modal.
- Disable Popup – the user can’t pause the video if this option is enabled.
- Enabled Sticky Mode – when a visitor will scroll to the bottom and the video is playing, the video will be sticky in the top-right corner.
- Repeat – two options are available. Once or Loop. You can choose according to your needs.
- Muted – enable if you want the video muted.
- Auto Play – enable if you want video will start playing as soon as it is ready. autoplay policy.
- Player Width – set the player width. Height will be calculated base on the value. Left blank for Responsive player.
- Seek Time – The time, in seconds, to seek when a user hits fast forward or rewind. The default value is 10 Sec.
- Auto Hide Control – enable if you want the controls (such as a play/pause button, etc) to hide automatically.
- Reset On End – the video will reset to first and show a thumbnail at end of the video.
- Preload – specify how the video file should be loaded when the page loads.
Password Protected & Google Vast TagURL
Enable Password Protected and set the password and set text message to the users.
Also, you can set Google Vast TagURL
Set video quality, you have to upload different videos of different video.
Enter language and upload .vtt file for video subtitle.
Caption & Chapters
Enable caption by default. This is an experimental option.
Set different chapters for the video.
ShortCode Classic- Controls, Branding & End Screen
When you edit the player in the classic editor, there are more settings on the right sidebar. There are Controls, Branding, and End Screen options.
In Controls, you can show/hide the video player controls like Large Play, Restart, Play, Rewind, Fast Forward, Progress, Current Time, Duration, Mute, Volume, Settings, PIP, Airplay, FullScreen, Download, and Controls Shadow.
From Branding settings, you can add branding logo or text on video overlay. Also, set the position of overlay content.
In End Screen settings, by enabling this show text or anchor text after the video ends.