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.
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.
Nelio Unlocker
Switch to WordPress safely while keeping your design and content
Improve your SEO today and boost your site speed by converting your pages into HTML, CSS, and WordPress standards. With zero technical knowledge required, you’ll only pay for what you need.
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.
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.
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).
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.
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:
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.
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.
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 -->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>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.
- subtitles
- 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.
After uploading the file to the media library, you are ready to select it.
You’ll see how it already appears in the video editing menu that you can edit the attributes 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.
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.
Leave a Reply