How to Add Video Using Blocks or Patterns with WordPress FSE

A common task with adding content is adding a video to a post or page.  This tutorial will guide you through the process of adding videos to your WordPress site.  We will discuss common concerns to think about before using video content,  using the blocks and patterns available in the full site editing system (FSE), and describing the different blocks and patterns you can use to add videos.

This tutorial uses WordPress version 6.0 and the Twenty Twenty-two theme. 

Things to Consider Before Adding Videos

Before you add a video to your WordPress site, remember that a video can help make your site more interesting, but it can also have a negative impact on your site. Make sure to consider the following factors before adding videos to your site.

Audience

The videos that you use for your site should be appropriate for your audience.  Your video should match the content your audience is searching for. It should also reflect the quality, length, and technicalities that your viewers are expecting.  For example, if your site is a blog for video creators, you will want to have appropriate content as well as technically correct videos to show your expertise.


Multiple Videos

If you’re planning on using many videos on your site, then make sure that you are using a Content Delivery Network (CDN) for your video content.  If you’re using links from YouTube or another video service (e.g. Vimeo, VideoPress), then you will not need to use a CDN as those services provide a delivery network when you play videos from their site.  

The consequence of not using a CDN and playing videos from a web hosting service may result in high resource usage, slow performance, and possible suspension of your web hosting service.

Background Videos

Some people like to use background videos for title covers for artistic reasons.  If you plan on doing this, then make sure to create a video loop that is short and optimized.  You don’t need a 5-minute video for a background cover.  

Using a long video will use hosting resources and possibly impact the performance of your site.

Copyright Issues

Make sure you have the rights to all videos that you put on your WordPress site.  

Misuse of copyrighted content can result in the suspension of your service, or at worse, a legal challenge resulting in possible fines or payment for usage. We recommend that you consult with a lawyer who specializes in copyright if you have questions.

Protecting Your Content

A content creator will often want to protect the videos that they are sharing on the site.  There are some plugins that you can add to your WordPress site that will help to protect videos from being downloaded.  But this is no guarantee that the video can’t be recorded.  

If you’re putting your content online, then you should be prepared for your content to be copied.  You should make sure that it is watermarked and properly copyrighted/registered. And you should be aware of your content’s presence online.  Make sure to occasionally search and check to make sure that your content is not being distributed from an unauthorized source.

Controls for Playback

When you use a service like YouTube or Vimeo, the playback frame will be marked as a YouTube or Vimeo product.  If you want to control this appearance yourself, then you will need to use a software solution and a CDN where you can customize how the video playback controls will appear.

Using Blocks for Videos

The WordPress FSE makes it very easy to add different types of content and video is no exception. Follow the steps below to see how to use a block to add a video to your post or a page.  We will follow this section with descriptions of the different types of video blocks that are currently available.

Steps for Adding Videos Using a Block or Pattern

  1. Log in to the WordPress Administrator Dashboard.
  2. Open an existing page or post, or create a new one.
  3. Click on the + sign in the top left corner of the editor to open the block inserter.


    Toggle block inserter
  4. Type “video” in the search field.

    Type Video in search field
  5. You will then see a number of blocks specifically for video.  Note that some video blocks will position the video as a background or in a specific area.  This applies to patterns that you might select.  For this tutorial, simply select the block labeled “video.”
  6. You will see the video block when you add it and there will be 3 options:  Upload, Media Library, or Insert from URL.  Use one of these options to add the video to the block.

    Video block - select video file
  7. Click on Save Draft, Publish, or Update to save your changes.

Types of Blocks for Video

The best way to see all of the blocks for videos is to open the blocks menu labeled “toggle block inserter” in the top left corner of the editor.

Toggle block inserter

Opening this column will display all of the blocks that you can use to insert a video into your post or page.  You will also see patterns, but we’ll discuss them later.

Video block options

The video blocks that are available can be sorted into a generic video block for local video files, 2 blocks based on positioning in a post or page, and 8 blocks based on a video service.

Video Block (generic)

Video Block (generic) - use to embed video

This block is used for adding local video files.  You can upload or use the Media Library.  It also accepts links to videos.  

Cover

Cover - background video block

This block is used for adding covers with a video background and overlay text.

Media & Text

Media & text - block with text and video that can be positioned

This block has the option to place the video on the left or right.  You can also add text to the left or right of the video.

Video Services

Example of video service block - YouTube video embedded

These blocks include YouTube, Vimeo, Animoto, Dailymotion, TikTok, TED, and WordPress.tv.  The frames controlling the playback of the video will typically identify the service that you’re using.  When you first add the block, you will need to provide the share URL for the video.

Video Plugins

Block plugins available for installation - plugins can be used for embedding videos and additional functionality

After your search of blocks and patterns, you will see a list of suggested plugins under the title, “Available to install.”  These plugins will give you added functionality and options that you can use for adding videos to your WordPress site. Note that the screenshot above only shows a few of the available plugins.

Using Patterns for Adding Video

The other choices that will appear when searching for video blocks are patterns.  Patterns are simply groups of blocks defined for a particular purpose.  In this case, there are patterns that are pre-defined for using video.  Available patterns for video will differ depending on the theme that you are using.  

You can also go to the WordPress.org site and copy patterns that have been placed in the Pattern library.

Patterns from the Theme

These patterns are provided with the Twenty Twenty-two theme.

Video Trailer

Video Trailer Pattern

This pattern has a particular color scheme and stretches across the entire width of the website.  It is made to be placed in the body of your content.

Header Video

Header video pattern

This pattern is made to showcase a video at the top of your content.  

Page Layout Pattern

Page layout with video pattern

The third pattern available within the Twenty Twenty-two theme is the Page Layout Pattern.  This pattern is for an entire page or post and includes a 2-column section under a title, a graphic, and a video section at the bottom of the page.

Patterns from WordPress.org

WordPress has also made patterns freely available to the public using the WordPress.org site.  To obtain one, simply go to the WordPress.org website, then click on Patterns in the menu.  You can then search through the patterns, find the ones you like, and copy them directly to your WordPress site.

We searched the Patterns and found two patterns for videos.  People are continually adding patterns, so there may be more at any point.  

Banner with Video fullwidth

Online pattern - banner with background video

This pattern provides four banner types with a video background.  Each type has either text or graphics in different locations on top of the video background.

Hero Banner with video background

Hero banner with text and background video - online pattern

This pattern includes a single banner with title and subtitle text along with a video background.

You now know how to add videos to your WordPress site using blocks or patterns through the full site editing system.

Learn more about the new WordPress editor, Gutenberg, and the capabilities of the separate Gutenberg plugin with our helpful Gutenberg articles!

AC
Arnel Custodio Content Writer I

As a writer for InMotion Hosting, Arnel has always aimed to share helpful information and provide knowledge that will help solve problems and aid in achieving goals. He's also been active with WordPress local community groups and events since 2004.

More Articles by Arnel

Comments

It looks like this article doesn't have any comments yet - you can be the first. If you have any comments or questions, start the conversation!

Was this article helpful? Let us know!