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)
231 lines
5.5 KiB
Text
231 lines
5.5 KiB
Text
1
|
|
00:00:00,000 --> 00:00:01,312
|
|
In this tutorial,
|
|
|
|
2
|
|
00:00:01,312 --> 00:00:07,000
|
|
we are going to see how you can quickly embed media and third party content on your website.
|
|
|
|
3
|
|
00:00:07,000 --> 00:00:13,571
|
|
An embed is a way to display external media or content on your website
|
|
|
|
4
|
|
00:00:13,571 --> 00:00:17,000
|
|
without having to upload or host it directly.
|
|
|
|
5
|
|
00:00:17,000 --> 00:00:22,238
|
|
Embeds allow you to incorporate various types of content seamlessly,
|
|
|
|
6
|
|
00:00:22,238 --> 00:00:28,000
|
|
such as videos, social media posts, maps, audio clips and more.
|
|
|
|
7
|
|
00:00:28,000 --> 00:00:33,000
|
|
You can, for example, display podcasts from Spotify on your website.
|
|
|
|
8
|
|
00:00:33,000 --> 00:00:38,277
|
|
Or posts from your Tumblr account, which I've displayed in columns
|
|
|
|
9
|
|
00:00:38,277 --> 00:00:41,000
|
|
using the columns block and changing the background color.
|
|
|
|
10
|
|
00:00:41,000 --> 00:00:48,000
|
|
The most common embed is probably embedding a video from YouTube, Vimeo or elsewhere.
|
|
|
|
11
|
|
00:00:48,000 --> 00:00:56,000
|
|
You can even add a survey to your site using CrowdSignal, for example.
|
|
|
|
12
|
|
00:00:56,000 --> 00:01:02,000
|
|
Or you might decide to add posts from X on your site.
|
|
|
|
13
|
|
00:01:02,000 --> 00:01:08,000
|
|
And lastly, you can even display music from SoundCloud.
|
|
|
|
14
|
|
00:01:08,000 --> 00:01:12,118
|
|
To add an embed block, click on the insert atop left
|
|
|
|
15
|
|
00:01:12,118 --> 00:01:15,000
|
|
and scroll all the way down to embeds.
|
|
|
|
16
|
|
00:01:15,000 --> 00:01:20,000
|
|
And here you will notice all the different embed blocks available.
|
|
|
|
17
|
|
00:01:20,000 --> 00:01:23,000
|
|
First up is the embed block itself.
|
|
|
|
18
|
|
00:01:23,000 --> 00:01:29,000
|
|
When you select the embed block, you can display content from other sites.
|
|
|
|
19
|
|
00:01:29,000 --> 00:01:31,000
|
|
Now that I've selected the block,
|
|
|
|
20
|
|
00:01:31,000 --> 00:01:35,000
|
|
it says paste a link to the content you want to display on your site.
|
|
|
|
21
|
|
00:01:35,000 --> 00:01:39,837
|
|
So I've already grabbed a URL from one of my X posts,
|
|
|
|
22
|
|
00:01:39,837 --> 00:01:43,000
|
|
which I'll paste there and then click on embed.
|
|
|
|
23
|
|
00:01:43,000 --> 00:01:47,000
|
|
Then we will see that the post displays on our site.
|
|
|
|
24
|
|
00:01:47,000 --> 00:01:52,000
|
|
You can also use embed blocks built for specific third party services.
|
|
|
|
25
|
|
00:01:52,000 --> 00:01:57,684
|
|
Such as X, YouTube, WordPress, Vimeo, CrowdSignal, PocketCosts, etc.
|
|
|
|
26
|
|
00:01:57,684 --> 00:02:04,000
|
|
As you can see in the list on the left.
|
|
|
|
27
|
|
00:02:04,000 --> 00:02:07,947
|
|
So instead of using the general embed block,
|
|
|
|
28
|
|
00:02:07,947 --> 00:02:14,000
|
|
we could have used the X embed block to achieve the same result.
|
|
|
|
29
|
|
00:02:14,000 --> 00:02:19,029
|
|
In the next example, I'm not going to click on the insert atop left,
|
|
|
|
30
|
|
00:02:19,029 --> 00:02:22,000
|
|
but rather type forward slash and the name of the block.
|
|
|
|
31
|
|
00:02:22,000 --> 00:02:25,000
|
|
I would like to add a YouTube video to my site.
|
|
|
|
32
|
|
00:02:25,000 --> 00:02:33,800
|
|
So I will type in forward slash YouTube, select the block
|
|
|
|
33
|
|
00:02:33,800 --> 00:02:41,000
|
|
and then add the URL of the video and then click on embed.
|
|
|
|
34
|
|
00:02:41,000 --> 00:02:46,020
|
|
But WordPress has made it even easier to add third party content to your site,
|
|
|
|
35
|
|
00:02:46,020 --> 00:02:49,000
|
|
so technically you don't even have to add the block.
|
|
|
|
36
|
|
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.
|
|
|
|
37
|
|
00:02:57,000 --> 00:03:01,154
|
|
Instead of inserting the Spotify embed block,
|
|
|
|
38
|
|
00:03:01,154 --> 00:03:09,000
|
|
I am going to paste the URL of a Spotify podcast straight into my page.
|
|
|
|
39
|
|
00:03:09,000 --> 00:03:14,000
|
|
Did you know you can transform an embed into a columns or a group block?
|
|
|
|
40
|
|
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.
|
|
|
|
41
|
|
00:03:19,000 --> 00:03:27,000
|
|
I would like to add a TED talk, so I'm going to type in forward slash TED, select the block
|
|
|
|
42
|
|
00:03:27,000 --> 00:03:30,000
|
|
and then paste the URL of the talk.
|
|
|
|
43
|
|
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.
|
|
|
|
44
|
|
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.
|
|
|
|
45
|
|
00:03:44,000 --> 00:03:50,400
|
|
Then I will add another TED embed block into my right column,
|
|
|
|
46
|
|
00:03:50,400 --> 00:03:56,000
|
|
paste the URL of my second video and then click on embed.
|
|
|
|
47
|
|
00:03:56,000 --> 00:04:00,615
|
|
Then I will select my columns block or container block
|
|
|
|
48
|
|
00:04:00,615 --> 00:04:06,000
|
|
and then in the block toolbar change the alignment to wide width.
|
|
|
|
49
|
|
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.
|
|
|
|
50
|
|
00:04:21,000 --> 00:04:25,000
|
|
But what happens if the embed blocks don't work?
|
|
|
|
51
|
|
00:04:25,000 --> 00:04:28,000
|
|
Well, we can use the HTML block.
|
|
|
|
52
|
|
00:04:28,000 --> 00:04:32,000
|
|
The embed block does not work for Facebook or Instagram posts for example.
|
|
|
|
53
|
|
00:04:32,000 --> 00:04:36,000
|
|
Let's make our way to one of our Facebook posts.
|
|
|
|
54
|
|
00:04:36,000 --> 00:04:44,690
|
|
Click on the three vertical dots, click on embed, copy the HTML code,
|
|
|
|
55
|
|
00:04:44,690 --> 00:04:57,000
|
|
return to your website, type in forward slash HTML and then select the custom HTML block.
|
|
|
|
56
|
|
00:04:57,000 --> 00:05:00,000
|
|
Then we can go ahead and paste the code.
|
|
|
|
57
|
|
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.
|
|
|
|
58
|
|
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.
|
