previously published as “Gutenberg Blocks – Video, Audio and Embeds”
Adding video or audio with the Block Editor is fairly intuitive and perhaps a clearer and simpler process than with the classic WP editor.
The Audio block allows you to upload or select from the library an audio (mp3) file. Alternatively, you can enter a URL for your audio file, allowing you to include an audio file without uploading it directly within WordPress.
On the web page, the audio block displays a simple HTML5 audio player so that the file can be played directly within the page or downloaded. The block is wrapped in a <figure> element with class wp-block-audio.
Audio block settings include autoplay, loop and preload. There doesn’t, as yet, seem to be a choice of whether or not to allow the download option.
To add a short video to your website, you can use the Video block. Like the audio block, you can upload a file, select one from the media library, or enter a URL, which allows you to include a video file without uploading it directly to WordPress.
The video is shown in a simple HTML5 video player, inside a figure with class wp-block-video.
As well as left, right or centre alignment, video block settings include autoplay, loop, mute and whether or not to display the video controls. Like the audio block, there does not, as yet, appear to be an option to disable downloads, other than to hide the video controls completely.
The video block fills the full width available (even if the video itself in intrinsically smaller). Place your video block inside a group or column block and constrain the width, if you want the video to be smaller.
Before rushing to upload videos to your website, it’s important to give some consideration to website performance and page-load time, as well as video format.
Most browsers these days can play a video which is in MP4 format. Videos recorded on phones or cameras are saved in a different format, so the video must be converted into the right format before uploading. If your video is professionally produced, it is important to ensure that you receive an MP4 version (as well as any other format you want) if you plan to upload it to your own website.
However, storing and streaming video from your own website hosting can very quickly require a lot of bandwidth and storage space. Including large images and video on a web page can slow the page-load time and impact performance.
Unless you are setting up a website dedicated to streaming web video (for which you’ll need a specialised hosting solution), it may well be more practical to make use of one of the many video hosting services, such as YouTube, Vimeo or Wistea. There are free and premium solutions, depending on your needs, and they are generally easy to use. Many services offer privacy settings, if you require them, which only allow the video to be shown on your own website, and not elsewhere.
As well as taking care of server load and storage space, video hosting services allow you to upload your video in almost any format and they handle the conversion to MP4. This makes the whole process much simpler, since the format of the video and the question of “how high or low-res does it need to be?” are handled for you.
The video hosting sites also manage playing the video, which usually means a better experience for the site visitor, who is shown a version of the video which their system can best handle.
Of course, you want to have the video actually play within your own web page – to do that, the usual method is to Embed it….
The Embed block supports embedding from a great variety of current website services, such as YouTube, Facebook, Twitter, Instagram, SoundCloud, Spotify, Flickr, Vimeo, Slideshare and many others. Here’s the full list as at time of writing.
Embedding is simple – when adding a block, scroll to the Embeds section and choose the Embed block for the website service of your choice eg TED.
Then simply paste in the URL of the web page you want to embed from – the WordPress editor will take care of the rest, and embed the video (or audio or other content) correctly.
eg url to paste:
If there is no Embed block for your choice of web service, you can try the generic Embed block. It works in exactly the same way and should allow you to embed from any site which supports embedding.