Embedding media and third-party content on your website
In this tutorial, we will explore the process of integrating media or external content into your website. This will be achieved by utilizing embed blocks, the HTML block, and the direct insertion of pertinent URLs onto your site.
Learning outcomes
- Define the concept of embedding.
- Utilize diverse embed blocks effectively.
- Demonstrate the skill of directly pasting URLs into pages or posts for embedding.
- Convert an embed into either a Columns or Group block as needed.
- Apply the HTML block proficiently for embedding purposes.
Comprehension questions
- Can you explain the benefits and best practices of using embedded content on a website to enhance user experience and engagement?
Transcript
What is an embed?
Hi, and welcome to Learn WordPress. This tutorial will show how you can quickly embed media and third-party content on your website. An embed is a way to display external media or content on your website without uploading or hosting it directly. Embeds allow you to seamlessly incorporate various types of content, such as videos, social media posts, maps, audio clips, and more. You can, for example, display podcasts from Spotify on your website. Or posts from your Tumblr account, which I’ve displayed in columns using the Columns block and changing the background color. The most common embed is probably embedding a video from YouTube, Vimeo, or elsewhere. You can even add a survey to your site using CrowdSignal. Next, you might decide to add Twitter posts to your site. And lastly, you can even display music from SoundCloud.
The Embed block
To add an embed block, click on the Inserter top left and scroll all the way down to embeds. Here you will notice all the different Embed blocks available. First up is the Embed block itself. Selecting the Embed block allows you to display content from other sites. Now that I’ve selected the block, it says paste the link to the content you want to display on your site. So I have already selected a URL from one of my Twitter posts which I’ll paste there and then click on embed. Then we will see that the post displays on our site.
Third-party embed blocks
You can also use Embed blocks built for specific third-party services, such as Twitter, YouTube, WordPress, Vimeo, CrowdSignal, PocketCosts, etc, as you can see in the list on the left. So instead of using the Embed block, we could have used the Twitter embed to achieve the same result.
In the next example, I won’t click on the Inserter top left but rather type / and the block’s name. I want to add a YouTube video to my site, so I will type in / YouTube, select the block, add the video URL, and then click on Embed.
Copy and paste the URL straight into a page or post
WordPress has made it even easier to add third-party content to your site. Technically, you don’t even have to add the block. You can merely paste the URL straight into your page or post. Let’s look at another example. Instead of inserting the Spotify embed block, I will paste the URL of a Spotify podcast straight into my page.
Transform an embed into a Columns or Group block
Did you know you can transform an embed into a Columns or a Group block? Transforming to one of these will let you change the background color and layout. I want to add a TED talk, so I’m going to type in forward slash Ted, select the block and then paste the URL of the talk. Once I’ve done that, I will select my block toolbar and transform this block to a Columns block. Then I will open up my sidebar settings and then change it from one column to two columns. Then I will add another Ted embed block into my right column. Paste the URL of my second video and then click on Embed. Then I will select my Columns block or container block, and then in the block toolbar, change the alignment to wide width. Then you can go to Styles, change the block’s background color, the padding, etc.
Control the behavior of your post embed when viewed on smaller devices
It is also important to note that when you open up your sidebar settings, you can control the behavior of your post embed when viewed from a smaller device. So, ensure that ‘Resize for smaller devices’ is toggled on. As you will notice below, it says this embed will preserve its aspect ratio when the browser is resized.
HTML block
But what happens if the Embed blocks don’t work? Well, we can use the HTML block. For example, the Embed block does not work for Facebook or Instagram posts. So let’s make our way to one of our Facebook posts. Click on the three vertical dots. Click on Embed. Copy the HTML code. Return to your website. Type in /HTML and then select the custom HTML block. Then we can go ahead and paste the code. When you click on Preview in the block toolbar, we can see how the post will display.
Conclusion
Visit Learn WordPress for more tutorials and training material. Remember, embedding content enhances the functionality of your site and enriches user experiences.
