Videos can be added to a post or page using the Video Block.
Here’s what it looks like when it’s added to the Block Editor.
To add a video block you click on the + icon at the right of any empty block or at the top left of the editor then search for video and click on the video block icon.
More detailed instructions for adding blocks can be found here.
The video block has three options:
- Upload: upload a new video file from your device.
- Media Library: select a video file that is already uploaded to your site’s media library.
- Insert from URL: link to the location of video on the Internet.
Once you’ve added your video you can add optional text caption underneath the player.
You reveal the block’s toolbar by selecting the block. The video block toolbar includes options to change block type, alignment, add text tracks and replace the video.
The change block type or style icon is used to transform the block to a cover, media & text, file, columns or a group block.
Click on the change alignment icon and select the preferred alignment. Choosing right or left allows you to place another block alongside the video block. Selecting center returns the block to the default and the video player will take up the full width of the post or page.
- Align left: used to align video player left.
- Align Center: used to center align video player.
- Align Right: used to align right video player.
Additional options for the video block are located in the editor sidebar of the block editor. Click on the Settings icon next to the Publish/Update button if you don’t see the editor sidebar.
- Autoplay: allows you to set the video file to auto play when someone visits the post or page.
- Loop: lets you choose if the video file repeats once it is finished.
- Muted: disables auto when the video file plays.
- Playback controls: give the viewer a play button, volume controls, HD mode, playback speed, and full screen options.
- Play inline: lets you set your video is to be played inline, that is within the element’s playback area.
The Preload controls how much of the video file is downloaded when the post or page is loaded:
- Auto: the entire video file is downloaded automatically without the visitor clicking on the play button. This setting is not recommended as it will slow down your page’s load speed.
- Metadata: only basic information about the video file is downloaded automatically.
- 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.
Poster image is used to add an image that displays before a video is set to play. This is helpful if the first frame of the video isn’t appealing or indicative of the video content.
The advanced tab lets you add a CSS class to your block allowing you to write custom CSS and style the block.