Read This if You Embed YouTube Videos in Your Posts

byYusufKY

183 followers

Updated 8 months ago

Embedding YouTube videos is a great way to strengthen your posts and add depth to your content, so I thought I'd share with you some nice tips and tricks related to embedding videos.

This blog post is perhaps more suited to a tutorial, but I've only been a WA member for around 70 days, so I can't create training yet.

I'm aware there are tutorials pertaining to embedding videos, but some of them are outdated. Also, this guide includes some additional information not covered in training which you may find useful.

I will structure my blog as follows:

(1) Three Ways to Embed a YouTube Video in Your Post

(2) Two Ways to Embed Only Part of a YouTube Video

(3) Some Nice Embedding Tips and Tricks

• How to Prevent Related Videos from Appearing
• How to Autoplay
• How to Prevent Viewers from Using Their Keyboard

Let's get started.

Three Ways to Embed a YouTube Video in Your Post

Method 1

The easiest way to embed a YouTube video in a post is to simply paste its URL — the Block Editor will automatically embed it for you.

Hit enter to insert a new block, and paste the URL in the part which says "Type / to choose a block".

As soon as you do that, you will have a "YouTube" block showing your video.

Here's a picture:

However, keep in mind that if you publish your posts from SiteContent, the default editor will be the Classic Editor. To work with the Block Editor, all you have to do is click "Convert to Blocks" at the very top of your post.

The nice thing about the "YouTube" block is that it automatically resizes it for smaller devices, so you don't have to worry about the video window being too large on mobile.

Method 2

Another method which is just as simple is to insert an "Embed" block, inside of which you will paste the video URL.

Here's a picture:

As soon as you click "Embed", the "Embed" block will become a "YouTube" block, so this method is pretty much the same as the first one.

Method 3

Alternatively, you can go to the YouTube video you want to embed and click the "Share" button right below the video.

Here's a picture:

Once you click "Share", choose "Embed" and you will get the code.

Here's a picture:

Now you copy this code, paste it into a "Custom HTML" block, and you're good to go.

This method of manually placing the code seems relatively tedious, so why would you choose this method as opposed to the previous two simpler ones?

Well, this method actually allows for useful custom settings. More about this a bit later.

Two Ways to Embed Only Part of a YouTube Video

What if you don't want to embed an entire video, but only a small part of it that is relevant to your content?

There are two ways of doing this.

Method 1

The first method is to clip the YouTube video as required.

To do this, click the "Clip" button which is to the right of the "Share" button under the YouTube video.

Here's a picture:

From there, you can choose a 5–60 second section of the video and give this clipped version a title.

Here's a picture:

Once you choose your clipped section, click the "Share clip" button, choose "Embed" and copy the code into a "Custom HTML" block — just like in Method 3 of embedding a full video.

This method is fine, but it has two problems:

1) The maximum duration of a clipped video is 60 seconds, so you can't use this feature if you want a 2-minute section of a long video, for example.

2) A clipped YouTube video is designed to loop repeatedly, so it will repeatedly loop in your blog post. You may not want it to loop.

Fear not, there is method 2.

Method 2

The other way to embed a specific part of a YouTube video is to specify the start and end times.

To do this, your video needs to be embedded in a "Custom HTML" block.

Remember when I said the tedious Method 3 has an advantage?

When you click the "Share" button under the YouTube video, you have the option of specifying when you would like the video to start.

Here's a picture:

Check the "Start at" button, choose the start time you want, and then hit enter.

The start time is now incorporated in the code.

Copy the code, and paste it in the "Custom HTML" block.

The video now starts at the specified time.

As for the end time, you have to specify it via code.

I understand many of you may be reluctant to tamper with anything code-related, but don't worry, it's very simple.

This is the HTML code for my embedded YouTube video with a specified start time:

See the part I highlighted that says start=60? This is the part of the code which makes the video start at 60 seconds, or 1:00.

To specify the end time, all you have to do is add the following code right after the start time portion:

&end=x

where x is the number of seconds of your end time.

For example, if you want the end time to be 2:44, your x is 164.

If you want the end time to be 3:51, your x is 231.

Here's how the adjusted code looks like:

Your embedded video now starts at 1:00 and ends at 2:44.

Note: The embed code you get from the "Share" button under a YouTube video has a default width of 560 and a default height of 315 for your video block. Unlike the "YouTube" block, the "Custom HTML" does not automatically resize the block for small-screen devices. For this reason, I suggest you keep the default width and height as they are.

Some Nice Embedding Tips and Tricks

1. Centering the Video

If you embed the video using the "Custom HTML" block as opposed to the "YouTube" or "Embed" blocks, your video won't be centered.

To fix this, we need a minor adjustment. Just add this piece before the code:

<div style="text-align: center">

And this piece after the code:

</div>

In other words, confine the entire code between those two pieces.

Your video is now centered.

This is how the adjusted code looks like:

Your embedded video which starts at 1:00 and ends at 2:44 is now centered.

2. Preventing Related Videos from Appearing

You know how when you pause a YouTube video or reach the end of it, you get suggested videos to watch?

If you're like me, you worry that your viewer will get distracted, leave your blog post, and go watch some music video which has been suggested to them after they finished watching the YouTube video embedded in your post.

To prevent this from happening, you can disallow video suggestions with a small code tweak.

Remember the start and end times which we added? All you have to do is add the following piece afterwards:

&rel=0

This tells YouTube to only suggest videos from the same YouTube channel.

This is how the adjusted code looks like:

Your centered embedded video which starts at 1:00 and ends at 2:44 now disallows any video suggestions from different channels.

This code tweak is particularly useful for those who are embedding a video from their own YouTube channel, as any video which will be suggested will also be one of their videos.

Unfortunately, YouTube does not allow us to completely prevent related videos from showing — the best we can do is limit the suggestions to the same YouTube channel.

3. Preventing Viewers from Using Their Keyboard

If you would like to prevent your viewer from being able to use their keyboard to fast forward, rewind, and pause, add the following piece of code next to the start and end times:

&disablekb=1

This tells YouTube to disable the viewer's keyboard from affecting the video.

Why would you want to do that?

Well, when you get the Embed code from the "Share" button under the YouTube video, you have the option of either showing or hiding player controls.

Here's a picture:

The player controls are the interactive buttons and sliders that allow users to manipulate the playback of a video.

If you choose to hide the player controls, you may not want the user to be able to fast forward and rewind without seeing the completion bar of the video. That's an example where disabling the keyboard would be beneficial.

This is how the adjusted code looks like:

Your centered embedded video now starts at 1:00, ends at 2:44, disallows any video suggestions from different channels, and prevents the user from controlling it with their keyboard.

4. Making the Video Autoplay

If you want the video to autoplay (i.e., play automatically without the user having to click on it), you can add this tiny piece of code to the bunch:

&autoplay=1

Why would you want to do that?

Perhaps your embedded video is something you want to place at the top of your article, so you would want it to start playing as soon the viewer lands on the post.

Perhaps it's a landing page and the video is promotional — you would want that to start playing as soon as the user lands, right?

This is how the adjusted code looks like:

Your centered embedded video now starts at 1:00, ends at 2:44, disallows any video suggestions from different channels, prevents the user from controlling it with their keyboard, and is on autoplay.

Hope this was useful.

Yusuf