Blocks, Media Blocks

Blocks » Video Block

The Video block allows you to upload video content directly into your post or page.

This feature is available on sites with our WordPress.com Premium, Business, and eCommerce plans. If your site has one of our legacy plans, it is available on the Pro plan.

If you do not wish to upgrade, you can upload your video to a free service like YouTube and embed the video onto your site.

Table of Contents

Add the Video Block

To add the Video block, click on the + Block Inserter icon and search for “video”. Click it to add the block to the post or page.

💡

Using your keyboard, you can also type /video on a new line and press enter to quickly add a new Video block.

Adding a Video block with the slash inserter.
Adding a Video block with the slash inserter

For more, visit our detailed instructions on adding blocks.

↑ Table of Contents ↑

Add Content to the Block

When you first add the Video block into your post or page, it will look like this:

Adding content to the Video block.

You can add your video by clicking into each of the corresponding numbered sections as explained below:

  1. Upload: Click to upload a new video from your computer into the Video block.
  2. Media Library: Click to choose from previously uploaded videos in your Media Library.
  3. Insert from URL: Click to insert a URL from a supported block type, such as YouTube. The Video block will automatically transform into a YouTube block.

Once the video is embedded into the page, you can add an optional caption if desired.

Here is an example of what the Video block looks like:

An example of the Video block

↑ Table of Contents ↑

Resize the Video Block

After you have added a video into the Video block, you can resize it. Click the video to reveal the resize handles that look like dots around the video. Then, click on a resize handle and drag the video to your desired size.

How to resize the Video block.

↑ Table of Contents ↑

Block Toolbar

When you click on the block, a toolbar of options will appear above it:

Video block toolbar.

The Video block has the following options in its toolbar:

  • Change block type.
  • Drag the block.
  • Move the block up or down.
  • Change the block’s horizontal alignment or width.
  • Add text tracks for captions, subtitles, etc.
  • Edit the video to upload a different one.
  • More options.

📌

If you do not see the option to change the width of the block to wide or full-width and your theme supports these options, it is possible the block has been added to a Group block. You can learn more about the Group block here.

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Click on the ⚙️ icon to open the block settings
Autoplay

Toggle this option to play the video automatically when the page is loaded, but only if supported by the browser. Some modern browsers block this feature.

Loop

Make the video play again from the beginning as soon as it ends.

Muted

Play the video without sound.

Playback Controls

Give the viewer a play button, volume controls, HD mode, playback speed, picture-in-picture, and full-screen options.

Play Inline

Play the video inline instead of full screen on mobile devices.

Video block settings: Autoplay, Loop, Muted, Playback Controls, Play Inline.
Preload

This allows you to select how much of the video file is downloaded when the page or post is loaded. While it may be tempting to have the whole video file download automatically, this can slow down your page’s load speed. There are three settings:

  • None: Nothing about the video file is downloaded automatically. The download of the video file only begins when your visitor clicks the Play button. This is the fastest setting.
  • Metadata: Only basic info about the file will be downloaded automatically. Like the None option, the download of the video file only begins when someone clicks Play. This setting is also very fast, as the only thing downloaded is text. On a fundamental level, there’s not a big difference between None and Metadata.
  • Auto: The entire video file is downloaded, regardless of whether the visitor clicks the Play button or not. This makes the biggest impact on your page or post’s load speed, especially with larger video files.
Video block settings: Preload.
Poster Image

You can choose a poster image that will be displayed before the video starts to play. This can be useful if the first frame of the video isn’t necessarily appealing or indicative of the video content.

Progress Bar Colors

The progress bar is the area at the bottom of the video that shows how much of the video has been watched and/or loaded.

If you enable the Match video option, the color of the progress bar will adapt to the dominant colors used in the video itself, providing an aesthetically pleasing experience for the viewer.

Video File Settings

Here you can choose:

  • Rating for the video: General (G), PG-13, and Restricted (R).
  • Allow download: With this setting enabled, viewers can download the video file via the share menu on the video player.
  • Video Privacy: Choose if the video is Public, Private, or matches the Site Default (your site’s privacy setting at Settings → General).
Video block settings: Poster Image, Progress Bar Colors, Video File Settings.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS to style the block. Learn more about adding additional CSS classes to blocks.

Recipe block - Advanced Settings
The advanced section lets you add a CSS class to your block.

↑ Table of Contents ↑

VideoPress

VideoPress is a lightweight and responsive video player that allows you to host and embed videos on your site. If you upload a video using the Video block, or by dragging and dropping a video into your post or page, it automatically becomes hosted with VideoPress.

See this guide for more information.

Not quite what you're looking for?

Get Help