Add a VideoPress Video Using the Block Editor

The VideoPress block allows you to insert your Jetpack VideoPress videos into posts and pages on your website.

To use the VideoPress block, your site should have an active Jetpack Complete or VideoPress plan. If you are using the Classic Editor plugin, please refer to this guide instead: Add a Video Using the Classic Editor.

Insert the VideoPress Block

You can add the VideoPress block by searching for and selecting it within the block selector. You can also type /videopress directly into the content of the page/post, then select the block from the drop-down that appears.

Please be sure to select the VideoPress block and not the Video block, as the VideoPress block includes special features designed for VideoPress.

Select a Video

You can add a video directly within the block by dragging the file to the block, or you can use one of the three buttons: Upload, Media Library, or Insert from URL.

• Upload will allow you to upload a new video file from your computer. You’ll see a progress bar where you can pause and resume the upload, and you’ll be able to edit your Video Title and Thumbnail for your video as your video uploads. See our article on Uploading a Video to Jetpack VideoPress for recommendations on file size and format for your videos.

• Media Library allows you to select any VideoPress file that’s already been uploaded to your library.
• Insert from URL allows you to insert the video URL directly.

Once the video successfully uploads, you’ll see the ‘Upload complete!’ notification. When you are settled with your Video Title and Thumbnail, click Done and you’ll see your video embedded into your post or page. From there, you’ll be able to set a caption for your video and access the Block Toolbar.

Block Toolbar

The VideoPress block toolbar allows you to change the video’s alignment on the page, change the video’s poster image, and add text tracks.

Change Alignment

By clicking the Change alignment button, you can change the video’s alignment to Align left, Align center, Align right, Wide width, or Full width.

Edit Poster Image

Clicking the poster image button will allow you to change the poster image for the video. This is the image that will be displayed before a video is played. This can be useful if the first frame of the video isn’t necessarily appealing or indicative of the video content.

While there isn’t a minimum required size for your poster image, we recommend that the image be at least the size of your video.

For example, if your video is a 1080p video, you should use an image that is 1920 by 1080 pixels.

Adding Subtitles or Captions within a Video

You can add subtitles or captions within your video by using a .vtt file. After adding your video using the VideoPress block, click on the Text Tracks icon, as shown below:

You can then press Upload Track to upload your .vtt file. The Label and Source Language fields will automatically be populated if nothing is inserted.

Click Save and your track will be added to the video. When you preview your post or page, you will see the subtitles menu that will be available in the video player, with your text track available as an option for a viewer to select.

Note that viewers can use the Captions Settings menu in the VideoPress player to customize the appearance of the subtitles or captions text to their liking.

Block Settings

Every block has options available in the editor sidebar. If you do not see the sidebar, click the ‘cog’ icon next to the Publish button, and it will appear.

Title and Description

Here, you can add a title and description for your video, which is helpful for SEO and accessibility purposes.

The Description box can also be used to add chapters to your video. Chapters are a great way to split up longer videos and organize them into different sections. They allow your visitors to see what each section is about and skip to their favorite parts.

How to add Chapters to your VideoPress videos

1. In the Description box, add a list of timestamps and titles.
2. Make sure that the first timestamp starts with 00:00.
3. Add at least three chapters entries.
4. Add your chapters entries in consecutive order, with at least 10-second intervals between each.

Playback Settings

This section of the sidebar lets you control several settings:

• Autoplay: This option lets you set your video to automatically play when someone visits your page or post. Some browsers do not respect this setting. You may need to enable mute for autoplay to work in those instances.
• Loop: This option allows you to choose if the video repeats automatically after it plays through. 
• Muted: This option allows you to choose if the video has sound when it plays. Users can still unmute the video from the player controls. It’s recommended to use the muted option if you choose to have your video autoplay.
• Show Controls: This option allows you to show or hide the playback controls on the video. This option is turned on by default.
• Play Inline: This option allows ​​your video to be played inline within the element’s playback area. However, not selecting this option doesn’t mean that your video will always be played fullscreen.

VideoPress Progress Bar Colors

You can use the Color settings to control the color of the progress bar in the VideoPress player.

VideoPress will automatically default to the Match Video setting, which will allow the progress bar to adapt to the video as it plays. If you toggle off Match Video, you’ll be presented with three color sections to change: Main, Loaded, and Progress.

After you select your desired Progress Bar colors, be sure to click Save Colors. Now, you’ll be able to see and customize your selected colors while previewing them in the player. When you update your page or post, these color changes will be live on your selected video.

Privacy and Rating

These settings allow you to control the video privacy, the video rating, and whether the VideoPress player should include the option to download the video.

Rating: Allows you to select a rating for the video, based on its content.

Privacy: This setting allows you to change whether or not the video is considered Private, for site members only, or Public, for all visitors to your site. For more information, check out our VideoPress: Privacy article.

Allow Download: This allows you to control whether the VideoPress player should include the option for users to download the video.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

Please note that the video player is embedded in an iframe, meaning it’s not possible to style the video player with CSS.

Only the <div> which contains the video player can be styled with CSS.

You can also add an HTML anchor to the block, which lets you link directly to that section of the page.

Video Stats

An overview of the overall video stats can be found within your Jetpack Stats. You can scroll down and find the “Videos” stats:

Clicking on “Video” will take you to the page that shows more statistics:

Impressions: The number of times a video was loaded on the page.

Hours watched: The total number of hours that the video has been watched by all viewers.

Views: The total number of how many times the video was played.

Troubleshooting

If you’re having trouble with videos, please refer to the article on Uploading a Video to Jetpack VideoPress or Troubleshooting Video Hosting Issues.