Video

Video

Video is a latest in browser video player with ultimate controls.

Video player is an ultimately a media player for playing from a digital video sources or from widely used video hosting services like YouTube & Vimeo of extensions like MP4 & AVI with controls like playing, pausing, stopping, forwarding & muting the audio.

Pro tip
Make a good product video instead of good product description. Users are tend to attract visually more than textually. Users are more fascinated by visual motion, basic human psychology.

Configuration for Video

If you find a good video on YouTube, paste a link in that YouTube box, or if you created a good one by yourself, upload it in a media and give it a go with some precise caption.

How to use the Video Block of The Plus Addons For Gutenberg

The Video block comes in three different types of video sources. You can create a superior-looking layout using a customized style option.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add video into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing video after “/” sign, eg.“/video”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Source

Select a source here. What do you have, YouTube ? Vimeo ? Own a Video ?

YouTube ID

Drop a YouTube video ID in this text box, rest will be done by code. ex. https://www.youtube.com/watch?v=TJ1SDXbij8Y. Bold text is video ID.

Vimeo ID

Drop a Vimeo video ID in this text box, rest will be done by code. ex. https://vimeo.com/27246366. Bold text is video ID.

Self Hosted (Upload Mp4 Video)

Got a video on your own ? Drop a file in here.

Player Settings

Auto-play

If auto play is enabled, video will be in play state when page load is completed.

Mute

If mute is enabled, audio will be muted initially. You can change it in player’s controls.

Loop

If loop is enabled, same video will be repeatedly played.

Controls

If controls are enabled, user will be able to control timeline, audio & video quality (for online hosted videos) kind of things.

Video Info

Video info is YouTube’s feature. Control whether to show video info or not from here.

Video Touch Disabled

If video touch disabled is on, user will not able to click on video player. Video will be played only as per your settings.

Modest Branding

Modest branding is a YouTube feature, if is enabled then YouTube logo will be removed from video player.

Suggested Videos

Suggested is a YouTube feature, if is enabled then suggested videos from YouTube will be displayed there.

Privacy Mode

Privacy mode is a YouTube feature, if is enabled then watching this video will not affect user’s browsing history on YouTube. Kind of Incognito Mode in YouTube.

Controls Color

Controls color is a Vimeo feature, which allows you to choose color according to your theme color for video title, description & player icon.

Intro Title

Intro title selection is only for Vimeo videos to enable/disable video titles.

Intro Portrait

Intro portrait selection is only for Vimeo videos to enable/disable video background image.

Intro Byline

Intro byline selection is only for Vimeo videos to enable/disable video author.

Banner/ Icon

Custom Layout

Create a custom layout like banner image & player icon from here.

Layout

Layout selection for custom layout for video player is here.

Upload Icon

Selection of play icon is here. Drop a custom icon image here.

Icon Size

Selection of play icon size is here.

Alignment

Alignment selection of play icon is here. Align it in right, left or centre sides.

Upload Banner image

Selection of banner image is here.Drop a custom banner image here.

Image Size

Selection of banner image size is here.

Upload Play Icon

Selection of Play Icon is here. Drop a custom Play Icon here.

Play Icon Size

Selection of Play Icon size is here.

Video Title

Add a custom video caption here.

Video Description

Add a custom video description here.

Play on Popup

If enabled, video will be played in popup.

SEO Option

Enable Schema Markup

If you enable this option, it will add google schema to your code based on the content of this block.

2. Style

The Style tab is used for customizing the appearance of all the Video get components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Video

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Transform CSS

Add custom CSS transform here. Ex. translate(-25px,-25px).

Icon

Continuous Animation

Icon will be animated continuously with your selected effect below.

Animation Effect

Select your choice of animation for icon here.

Hover Animation

Select if you want to have animation on hover or not.

Duration Time

Reputation of animation duration time selection is here.

Icon Radius

Set the radius curve of the icon’s corner.

Icon Size

Set icon’s size from here.

Video Title

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the text.

Background Color

A color picker to assign suitable color to the background.

Video Description

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the text.

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.