Html5 Video Player Docs Html5 Video Player Docs

  1. Home
  2. Docs
  3. Html5 Video Player Docs
  4. Guides
  5. ShortCode Gutenberg

ShortCode Gutenberg

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.

HTML5 Video Player- Gutenberg ShortCode Choose Video Type
HTML5 Video Player- Gutenberg ShortCode Choose Video Type

Sidebar settings

Select the block, you will see the settings option in the right sidebar. There are three options, Settings, Controls, and Style.

HTML5 Video Player- Gutenberg ShortCode Sidebar Settings
HTML5 Video Player- Gutenberg ShortCode Sidebar Settings

Settings

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.

HTML5 Video Player- Gutenberg ShortCode Settings
HTML5 Video Player- Gutenberg ShortCode Settings

Chapters

Set different chapters for the video from here.

HTML5 Video Player- Gutenberg ShortCode Chapters
HTML5 Video Player- Gutenberg ShortCode Chapters

Overlay

Add branding logo or text on video overlay. Also, set the position of overlay content.

HTML5 Video Player- Gutenberg ShortCode Overlay
HTML5 Video Player- Gutenberg ShortCode Overlay

End Screen

By enabling this show text or anchor text after the video ends.

HTML5 Video Player- Gutenberg ShortCode End Screen
HTML5 Video Player- Gutenberg ShortCode End Screen
HTML5 Video Player- Gutenberg ShortCode Streaming & Speed
HTML5 Video Player- Gutenberg ShortCode Streaming & Speed

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.

HTML5 Video Player- Gutenberg ShortCode Popup, Watermark & Additional
HTML5 Video Player- Gutenberg ShortCode Popup, Watermark & Additional

Controls

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.

HTML5 Video Player- Gutenberg ShortCode Controls
HTML5 Video Player- Gutenberg ShortCode Controls

Style

Go to the Style tab beside the Controls tab to set the width and rounded corner value of the video player.

HTML5 Video Player- Gutenberg ShortCode Style
HTML5 Video Player- Gutenberg ShortCode Style
Tags:
Was this article helpful to you?

How can we help?