Picture of a man browsing the web with a tablet

Creating interesting and engaging content is the key to getting your visitors caught up in it and wanting to know more about you and your products. Previously, I already mentioned some tricks to create pages that make you fall in love and I explicitly mentioned the importance of including visual elements.

In fact, last year, a study by Zenith predicted that in 2021 there would be an increase in video views of up to 100 minutes per day and an increase in video advertising spending of 35%. According to Cisco, by 2022 80% of all Internet traffic will be in video format. And I’m afraid that all these predictions fall short on the current pandemic.

Global online video viewing
Global online video viewing and advertising prediction for 2021.

So, without further ado about the importance of adding videos to your website’s posts and pages, let’s see how easy it is to add videos in WordPress and what new features the latest version of Gutenberg 9.2.2 provides.

Copy The URL Of A Video

We are lucky that the WordPress editor allows you to embed a video from any platform very easily. In the browser, from the platform where the video is located, you can directly copy its URL.

Screenshot of how to select the URL of a YouTube video
Select and copy the URL of the video you want to embed.

You can also copy the URL by clicking on the Share button that you find to share the video and with which you can add additional options, such as indicating the start time of the video.

Share YouTube video
Share YouTube video indicating to start in minute 1.

Then you just have to paste it directly into a text block or you also have the option of previously selecting the block of the type of video you are going to insert. So, for example, if I want to embed the WordCamp US 2019 – State of the Word video from YouTube starting right the minute Matt Mullenweg appears, I will create a new YouTube block and insert the URL https://youtu.be/gS6_xOABTWo?t=2085 (or alternatively the url https://www.youtube.com/watch?v=gS6_xOABTWo&start=2085).

Embed a YouTube video.
Embed a YouTube video.

Note that the time must be indicated in seconds. In addition, you also have the option of aligning the video as you wish in your page.

Align video of the YouTube type block.
Align the YouTube video type block.

And you get a new embedded video in your post:

But not only that, when you add a YouTube block (or another type of video) you also have other options that you can add to the video display and that depend on the platform on which it is played.

Thus, for example, in the case of YouTube, the available options (through additional parameters in the URL) that you have are:

  • To embed the video with default width and height adapted to the theme: https://www.youtube.com/gS6_xOABTWo
  • To specify width and height explicitly: https://www.youtube.com/watch?v=gS6_xOABTWo?&w=320&h=240
  • To specify width only: https://www.youtube.com/watch?v=gS6_xOABTWo&w=320
  • To align the player to the left: https://www.youtube.com/watch?v=gS6_xOABTWo&align=left
  • To align the player to the right: https://www.youtube.com/watch?v=gS6_xOABTWo&align=right
  • To show only related videos from the same channel after finishing the video: https://www.youtube.com/watch?v=gS6_xOABTWo&rel=0
  • To specify a start and end time for a video, add the start and end time: https://www.youtube.com/watch?v=gS6_xOABTWo&start=75&end=500

Upload And View Your video In Your WordPress

Sometimes it may happen that you don’t want to upload your own videos to third-party platforms and want to have them exclusively on your WordPress server. Uploading a video to your media library and adding it is as easy as uploading any other image. Click Media or add a Video type block:

Video type block.
Video type block.

Just like when you add an image, you have the option to directly upload the video, select it from the media library, or insert its URL.

Schreenshot of how to add a video block in the block editor
Add video from the block editor.

Then, on the media library, we only have to select the video we want to insert and we will have it available on our page or post.

Screenshot of video files available in the Media library of WordPress
All videos available to embed will be displayed in the media library.

And once selected, we will have it available for all our visitors.

Also, the new version of Gutenberg 9.2.2. adds new functionalities to the video insertion. In particular, it allows you to add HTML elements of type <track> from the edit menu.

Surely you have noticed that if you have downloaded a video, the folder that contains it also includes an SRT file. These are subtitle files that are not included in the video but that the video player is able to extract and display in sync with the video you are watching. So a track element serves to indicate the location and some additional feature of these SRT files.

When inserting a video, the generated HTML is similar to:

<!-- wp:video {"id":15850} -->
<figure class="wp-block-video">
<video controls="" src="/my-site.com/.../my-video.mp4"></video></figure>
<!-- /wp:video -->Code language: HTML, XML (xml)

With this new version of Gutenberg, now you can add track elements to videos from the edit menu with no HTML editing at all. So, for example, you could add English subtitles to a video and the HTML code would include a track with the subtitle information.

<video controls="" src="/my-site.com/.../my-video.mp4">
<track src="mi-sitio.com/.../english-captions.srt" label="English" srclang="en">
</video>Code language: HTML, XML (xml)

The attributes that can be indicated on the tracks are the following:

  • srclang – Language of the track’s text data. It must be a valid BCP 47 language tag code.
  • label – Title for the player interface.
  • kind – How the track text is used. It can have the following keywords:
    • subtitles
      • Subtitles for translations of the video content (e.g. subtitles in Spanish when the video is in English) designed for people who do not understand a language.
    • captions
      • Transcription of what is heard in the video (dialogue and other sounds) intended for people with hearing problems.
    • descriptions
      • Textual description of the video content intended for people who are blind or cannot view the video.
    • chapters
      • Chapter titles are intended to be used when the user navigates through multimedia resources.
    • metadata
      • Tracks used by scripts. Not visible to users.
  • src – URL of the text file.

How do we add these tracks? Very easy, after adding a block of video type and selecting the video we want to show, a new option appears in the video editing menu, which is Add Tracks with the options of Open Media Library or Upload.

Upload or select from the media library the file that contains the text of the track.
Upload or select from the media library the file that contains the text of the track.

After uploading the file to the media library, you are ready to select it.

Screenshot of how to select from the WordPress media library the track containing the text to be syncroniezed with the video
Select from the media library the track containing the text to be synchronized with the video.

You’ll see how it already appears in the video editing menu that you can edit the attributes of the track:

Edit the properties of the track.
After selecting the file you can now edit the properties of the track.

Click the Edit button and modify the attributes as appropriate. You will now have the text track included in your video synchronized with the video display.

Screenshot of how to modify the attributes of the track of a video in Gutenberg
Modify the attributes of the track as they suit you.

Thus, you can not only have your own videos in your media library, but you can also easily include additional information about them.

You’ve already seen that including videos that you have hosted on third-party platforms is very easy just by copying the URL of where the video is located. But if, for whatever reason, you prefer to have your videos hosted in your own WordPress installation, with this latest version of Gutenberg you can now show your videos in a comfortable way.

Photo by CardMapr on Unsplash.

Leave a Reply

Your email address will not be published. Required fields are marked *

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.