The Video Block allows you to insert your Jetpack VideoPress videos into posts and pages on your website.
If you have disabled sharing on your video, you can still use the video block or the shortcode block to insert your video.
If you are using the Classic Editor plugin, you will need to see our article on how to Add a Video Using the Classic Editor.
Insert the Video Block
You can add the video block by searching and/or selecting it from the block selector, or you can type
/video on the page/post and select it from the drop-down that appears.
Select the Video Block rather than the VideoPress block, as they function differently.
Select a Video
You can add a video directly within the block by dragging the file to the block or using one of the three buttons: Upload, Media Library, and 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 video file that’s already been uploaded to your library, including those that have been uploaded to Jetpack’s video hosting.
- Insert from URL allows you to insert any video URL, both from Jetpack’s video hosting and third-party services.
If you insert a URL from another supported block type, such as YouTube, the Video block will automatically transform into a YouTube block.
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. There you’ll be able to set a caption for your video and access the Block Toolbar.
The video block allows you to change the video’s alignment on the page, add text tracks, and edit the video used in the block.
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.
The edit option in the video block’s toolbar will remove the selected video from the block.
Once removed, you will have the option to select a new video from your computer, the media library, or from a URL.
Adding Subtitles, Captions, or Chapters within a Video
You can add subtitles, captions, or chapters within a video that will play along with it by using a .vtt file. You can first start by adding the video to a post or page using the Video Block and then click on the Text Tracks icon as shown in the video below:
You can then press Select Track to be able to select a previously uploaded file or proceed to upload one. Label and Source Language fields will automatically be populated if nothing is inserted.
Save and your track will get added to the video. Preview your post, and the subtitles menu 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 to customize the appearance of the subtitles or captions text to their liking.
Every block has specific options in the editor sidebar and options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.
Video Settings Toggles
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.
- Playback 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.
This option allows you to select how much of the video file is downloaded when the page or post is loaded. There are three settings:
- None: Nothing about the video file is downloaded automatically. The video file download only begins when your visitor clicks the Play button. This setting will make sure that your page loads the most efficiently.
- Metadata: Only basic info about the file will be downloaded automatically. Like the None option, downloading 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. While it may be tempting to go ahead and have the whole file downloaded automatically, keep in mind that this can slow your page’s load speed down.
Optionally, you can choose a poster image that will be displayed before a video is set to Play; 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.
VideoPress Progress Bar Colors
You will find the Progress Bar Color settings within the block settings when adding your video to a page or post.
VideoPress will automatically default to Match Video 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 as you feel on the same page or post. When you update your page or post these color changes will be live on your selected video.
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 checkout our VideoPress: Privacy article.
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 and 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.
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.
This feature is deactivated by default. It can be activated/deactivated at any time by toggling the “Enable high-speed, ad-free video player” setting in the Video section at Jetpack → Settings → Performance in your dashboard.
|Site Owners / Users
In order to track video plays for your stats, we will send the site ID, post ID (on which the video is played), and domain name of your site with these events.
If Google Analytics tracking is enabled, some video information (size, quality, format, file name, ID, etc.) will be sent there, as well.
|Site Owners / Users
We track when, and by which user, the feature is activated and deactivated.
|Data Synced (Read More)|
|Site Owners / Users
We sync options that identify whether or not the feature is activated and how its available settings are configured.