In this tutorial we are going to see 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 incorporate various types of content seamlessly, 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 for example.
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 to top left and scroll all the way down to Embeds.
And here you will notice all the different embed blocks available.
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 there and then 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.
So instead of using the general Embed block, we could have used the X embed block to achieve the same result.
In the next example, I'm not going to click on the Inserter to top left, but rather type forward slash and the name of the block.
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 it even easier to add third party content to your site.
So 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'm going to paste the URL of a Spotify podcast straight into my page.
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 as well as the layout.
I would like 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 background color of the block, change the padding, etc.
But what happens if the embed blocks don't work?
Well, we can use the HTML block.
The embed block does not work for Facebook or Instagram posts, for example.
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 forward slash HTML, and then select the custom HTML block.
And then we can go ahead and paste the code.
And now in the block toolbar, we can click on preview to see how the post will display.
I trust you now have all the tools you need to embed third party content on your site.