studio
4cfcf09a97
Sources: video-subtitle-pipeline artifacts/beginner-wordpress-user/ - subtitles/: en, zh, bilingual SRT/ASS (100 files) - platform/: youtube SRT + bilibili BCC per video (75 files) - manifests/: per-video manifest.json (25 files) - quality/: quality reports (50 files)
167 lines
5 KiB
Text
167 lines
5 KiB
Text
1
|
|
00:00:00,000 --> 00:00:07,000
|
|
In this tutorial, we are going to see how you can quickly embed media and third party content on your website.
|
|
|
|
2
|
|
00:00:07,000 --> 00:00:17,000
|
|
An embed is a way to display external media or content on your website without having to upload or host it directly.
|
|
|
|
3
|
|
00:00:17,000 --> 00:00:28,000
|
|
Embeds allow you to incorporate various types of content seamlessly, such as videos, social media posts, maps, audio clips and more.
|
|
|
|
4
|
|
00:00:28,000 --> 00:00:33,000
|
|
You can, for example, display podcasts from Spotify on your website.
|
|
|
|
5
|
|
00:00:33,000 --> 00:00:41,000
|
|
Or posts from your Tumblr account, which I've displayed in columns using the columns block and changing the background color.
|
|
|
|
6
|
|
00:00:41,000 --> 00:00:48,000
|
|
The most common embed is probably embedding a video from YouTube, Vimeo or elsewhere.
|
|
|
|
7
|
|
00:00:48,000 --> 00:00:56,000
|
|
You can even add a survey to your site using CrowdSignal, for example.
|
|
|
|
8
|
|
00:00:56,000 --> 00:01:02,000
|
|
Or you might decide to add posts from X on your site.
|
|
|
|
9
|
|
00:01:02,000 --> 00:01:08,000
|
|
And lastly, you can even display music from SoundCloud.
|
|
|
|
10
|
|
00:01:08,000 --> 00:01:15,000
|
|
To add an embed block, click on the insert atop left and scroll all the way down to embeds.
|
|
|
|
11
|
|
00:01:15,000 --> 00:01:20,000
|
|
And here you will notice all the different embed blocks available.
|
|
|
|
12
|
|
00:01:20,000 --> 00:01:23,000
|
|
First up is the embed block itself.
|
|
|
|
13
|
|
00:01:23,000 --> 00:01:29,000
|
|
When you select the embed block, you can display content from other sites.
|
|
|
|
14
|
|
00:01:29,000 --> 00:01:35,000
|
|
Now that I've selected the block, it says paste a link to the content you want to display on your site.
|
|
|
|
15
|
|
00:01:35,000 --> 00:01:43,000
|
|
So I've already grabbed a URL from one of my X posts, which I'll paste there and then click on embed.
|
|
|
|
16
|
|
00:01:43,000 --> 00:01:47,000
|
|
Then we will see that the post displays on our site.
|
|
|
|
17
|
|
00:01:47,000 --> 00:01:52,000
|
|
You can also use embed blocks built for specific third party services.
|
|
|
|
18
|
|
00:01:52,000 --> 00:01:57,684
|
|
Such as X, YouTube, WordPress, Vimeo, CrowdSignal, PocketCosts, etc.
|
|
|
|
19
|
|
00:01:57,684 --> 00:02:04,000
|
|
As you can see in the list on the left.
|
|
|
|
20
|
|
00:02:04,000 --> 00:02:14,000
|
|
So instead of using the general embed block, we could have used the X embed block to achieve the same result.
|
|
|
|
21
|
|
00:02:14,000 --> 00:02:22,000
|
|
In the next example, I'm not going to click on the insert atop left, but rather type forward slash and the name of the block.
|
|
|
|
22
|
|
00:02:22,000 --> 00:02:25,000
|
|
I would like to add a YouTube video to my site.
|
|
|
|
23
|
|
00:02:25,000 --> 00:02:41,000
|
|
So I will type in forward slash YouTube, select the block and then add the URL of the video and then click on embed.
|
|
|
|
24
|
|
00:02:41,000 --> 00:02:49,000
|
|
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.
|
|
|
|
25
|
|
00:02:49,000 --> 00:02:57,000
|
|
You can merely paste the URL straight into your page or post. Let's look at another example.
|
|
|
|
26
|
|
00:02:57,000 --> 00:03:09,000
|
|
Instead of inserting the Spotify embed block, I am going to paste the URL of a Spotify podcast straight into my page.
|
|
|
|
27
|
|
00:03:09,000 --> 00:03:14,000
|
|
Did you know you can transform an embed into a columns or a group block?
|
|
|
|
28
|
|
00:03:14,000 --> 00:03:19,000
|
|
Transforming to one of these will let you change the background color as well as the layout.
|
|
|
|
29
|
|
00:03:19,000 --> 00:03:30,000
|
|
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.
|
|
|
|
30
|
|
00:03:30,000 --> 00:03:37,000
|
|
Once I've done that, I will select my block toolbar and transform this block to a columns block.
|
|
|
|
31
|
|
00:03:37,000 --> 00:03:44,000
|
|
Then I will open up my sidebar settings and then change it from one column to two columns.
|
|
|
|
32
|
|
00:03:44,000 --> 00:03:56,000
|
|
Then I will add another TED embed block into my right column, paste the URL of my second video and then click on embed.
|
|
|
|
33
|
|
00:03:56,000 --> 00:04:06,000
|
|
Then I will select my columns block or container block and then in the block toolbar change the alignment to wide width.
|
|
|
|
34
|
|
00:04:06,000 --> 00:04:21,000
|
|
Then you can go to styles, change the background color of the block, change the padding, etc.
|
|
|
|
35
|
|
00:04:21,000 --> 00:04:25,000
|
|
But what happens if the embed blocks don't work?
|
|
|
|
36
|
|
00:04:25,000 --> 00:04:28,000
|
|
Well, we can use the HTML block.
|
|
|
|
37
|
|
00:04:28,000 --> 00:04:32,000
|
|
The embed block does not work for Facebook or Instagram posts for example.
|
|
|
|
38
|
|
00:04:32,000 --> 00:04:36,000
|
|
Let's make our way to one of our Facebook posts.
|
|
|
|
39
|
|
00:04:36,000 --> 00:04:57,000
|
|
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.
|
|
|
|
40
|
|
00:04:57,000 --> 00:05:00,000
|
|
Then we can go ahead and paste the code.
|
|
|
|
41
|
|
00:05:01,000 --> 00:05:08,000
|
|
And now in the block toolbar we can click on preview to see how the post will display.
|
|
|
|
42
|
|
00:05:08,000 --> 00:05:15,000
|
|
I trust you now have all the tools you need to embed third party content on your site.
|
