Introduction
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 having to upload or host 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 embedding is probably embedding a video from YouTube, Vimeo, or elsewhere. You can even add a survey to your site using CrowdSignal. Or you might decide to add posts from X on your site. And lastly, you can even display music from SoundCloud. 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.
Embed block
First up is the Embed block itself. When you select the Embed block, you can 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’ve already grabbed a URL from one of my X posts, which I’ll paste and click on Embed. Then, we will see that the post displays on our site. You can also use embed blocks built for specific third-party services, such as X, YouTube, WordPress, Vimeo, CrowdSignal, PocketCasts, etc as you can see in the list on the left. Instead of using the general Embed block, we could have used the X embed block to achieve the same result.
YouTube & Spotify block
In the next example, I’m not going to click on the Inserter to the top left, but rather type the forward slash and the block’s name. I would like to add a YouTube video to my site, so I will type in forward slash YouTube, select the block, and then add the URL of the video, and then click on embed. But WordPress has made adding third-party content to your site even easier. 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.
Transforming an embed block to a Columns block 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 would like to add a TED talk, so I will 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. 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, change the padding, etc. But what happens if the embed blocks don’t work?
HTML block
Well, we can use the HTML block. For example, the embed block does not work for Facebook or Instagram posts. 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 forward slash HTML, and then select the custom HTML block. Then, we can go ahead and paste the code. We can click on the preview in the block toolbar to see how the post will display.
Conclusion
I trust you now have all the tools you need to embed third-party content on your site.