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.
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.
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 widgets panel.
After placing the widget you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.
Select a source here. What do you have, YouTube ? Vimeo ? Own a Video ?
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.
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.
Got a video on your own ? Drop a file in here.
If auto play is enabled, video will be in play state when page load is completed.
If mute is enabled, audio will be muted initially. You can change it in player’s controls.
If loop is enabled, same video will be repeatedly played.
If controls are enabled, user will be able to control timeline, audio & video quality (for online hosted videos) kind of things.
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 is a YouTube feature, if is enabled then YouTube logo will be removed from video player.
Suggested is a YouTube feature, if is enabled then suggested videos from YouTube will be displayed there.
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 is a Vimeo feature, which allows you to choose color according to your theme color for video title, description & player icon.
Intro title selection is only for Vimeo videos to enable/disable video titles.
Intro portrait selection is only for Vimeo videos to enable/disable video background image.
Intro byline selection is only for Vimeo videos to enable/disable video author.
Create a custom layout like banner image & player icon from here.
Layout selection for custom layout for video player is here.
Selection of play icon is here. Drop a custom icon image here.
Selection of play icon size is here.
Alignment selection of play icon is here. Align it in right, left or centre sides.
Selection of banner image is here.Drop a custom banner image here.
Selection of banner image size is here.
Add a custom video caption here.
Play on Popup
If enabled, video will be played in popup.
The Style tab is used for customising the appearance of all the Video get components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.
View The Style Tab Article
Draw a border around the element and give width and color to it.
Set the radius curve of the element’s corner.
Give Box/Text/Drop shadow effect and color to an element.
Add custom CSS transform here. Ex. translate(-25px,-25px).
Icon will be animated continuously with your selected effect below.
Select your choice of animation for icon here.
Select if you want to have animation on hover or not.
Reputation of animation duration time selection is here.
Set the radius curve of the icon’s corner.
Set icon’s size from here.
Assign size, weight, spacing and much more to fonts.
A color picker to assign suitable color to the text.
A color picker to assign suitable color to the background.