Video Block – Overview & How to Use Guide

The allows you to embed video files and play them back using a simple player. Video Block Description

Videos are the important part of a content, and makes adding videos to your content really simple. So let’s see what the video block can do and how to use it.

Video Walkthrough of the video Block

How to add Video Block?

Like any other block there a couple of ways you can add a video Block in Gutenberg Editor.

  1. Click on the (+) icon and search for “Video” and click it.
  2. Simply hit “Enter” key at the end of content and you will get a new paragraph block automatically added. Then you need to type “/” you will see an autocomplete menu with the list of available blocks. Just type video and you will notice the video block. Hit enter or click on the video block.

Embed Videos Directly

Video Block and Video Embed are two separate things. Video Block is to add self-hosted videos. To embed a video you simply need to paste the video URL in the paragraph block and it will get converted to an embedded video automatically.

It’s super easy to embed videos directly into your content in Gutenberg WordPress Editor. If you are using a service like Youtube, Vimeo, etc to host your videos, you can add the video by just pasting its URL.

The easy embedding feature is mostly powered by oEmbed, a protocol for site A (such as your blog) to ask site B (such as YouTube) for the HTML needed to embed content from site B. oEmbed was designed to avoid the need to copy and paste HTML from the site hosting the media you wish to embed.

Wondering what sites you can embed from?

You can use all of the services mentioned here at WordPress codex.

Video Block Toolbar Controls

Video Block Toolbar is divided into two parts. Let’s understand what all these controls can do. This toolbar appears on top of the block while you are editing it.

Alignment Options

These options allow you to simply align the video to left, center or right. Nothing complicated here you must be already familiar with these options in classic WordPress editor.

Edit Option

The pencil icon you see in the toolbar allows you to edit your video. You can change the video by clicking on that icon.

Video Block Inspector/Sidebar Controls

There is currently no control in the sidebar for video block. You will just see the “Addition CSS Class” control which allows you to add a custom CSS class to this block/div.

Gutenberg Editor is right now in the development phase. This block may receive more updates and changes in future. This guide will be updated when any updates related to this block comes out.


Also published on Medium.