Adding a Video in Gutenberg Editor

by Mar 1, 2021Gutenberg, WordPress 5.0, WordPress Tutorials - WP Tutorials

Need WordPress Help? Click Here.

Adding a video in Gutenberg

Tutorial Video on How to Add YouTube and Vimeo Videos in WordPress

Adding a Video in Gutenberg Editor

Total Time: 2 minutes

Step 1

There are two types of videos you can add in Gutenberg: uploaded video file and embedded video.

Step 2

To add a video as a file upload, hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor).

Step 3

Select Blocks. Then scroll to Common Blocks. Under that section you will see Video. Select Video.
Hint: You can also type “Video” in the search bar to quickly get to the video option.

Step 4

A video block will appear within the editor. Click on Upload to upload a video from your computer. Click on Media Library to select a video that you’ve previously uploaded from your media library. Once you’ve uploaded your video or selected it from your media library, click on use url. A preview of your video will appear in the editor. Note: You will not be able to preview your video within Gutenberg editor, but you can preview it, by clicking Preview button in the upper right hand corner.

Step 5

To upload a video as an embedded video, there are a multiple embed blocks you can use such as: Embed block, Youtube embed block, and Facebook embed block. Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor). Click on add block Click on Embeds and select the method of embedding you would like to use (YouTube is used for this example).

Step 6

Paste the url of the video you would like to use within the embed block. After you entered the link, click Embed.
Note: You will not be able to preview your video within Gutenberg editor, but you can preview it, by clicking Preview button in the upper right hand corner.

Final Result

Now you will see your YouTube or Vimeo video in the WordPress editor. You can now preview or publish your page in order for your visitors to view it.

More WordPress Tutoring Goodness


Copyright ByRivers Tech LLC/ WP-Tutoring.Com All Rights Reserved.

  • Get Expert WordPress Help Right Now!

  • Please enter your phone number so we can fully discuss your needs.
  • This field is for validation purposes and should be left unchanged.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *