Read This if You Embed YouTube Videos in Your Posts

blog cover image
12
169 followers
Updated

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

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training

Recent Comments

39

Hmm, so I just followed this, and it didn't seem to actually do anything. Here is my code below:

<iframe width="560" height="315" src="https://www.youtube.com/embed/NlwIw3rq7II?si=13CC8eU-GrPAVFUH&rel=0&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Didn't auto play, and suggested other channel videos.

I'll tell you what Andy.

Try replacing the first & with a ? and let me know if that sorts it out.

Your code will become:

<iframe width="560" height="315" src="https://www.youtube.com/embed/NlwIw3rq7II?si=13CC8eU-GrPAVFUH?rel=0&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Well, that also didn't work. It's okay though. It's not that big of a deal, since it wasn't formatting correctly either. Thanks for trying.

Okay Andy, can you try replacing the question mark with a semicolon?

Your code will become:

<iframe width="560" height="315" src="https://www.youtube.com/embed/NlwIw3rq7II?si=13CC8eU-GrPAVFUH;rel=0&autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

You see, the reason I suggest this is because in the blog post above, I had a start time attribute as well as a rel=0 and autoplay=1.

The & operator means AND, so by definition, there must be something before it.

The start time was the first specified attribute and it came after a semicolon, so perhaps rel=0 needs to come after a semicolon in your case.

Hope that resolves it. Let me know if it doesn't though. I'll try to figure it out.

Andy, I actually tried your very first code and it worked for me.

It was autoplaying, and no video suggestions at the end.

Hmm, interesting. I'll have to play around with it some more. I read that it could be the browser I'm using, though I tried it on two other browsers, so I'm not sure. But thanks for letting me know that it worked on your end!

Hi 👋🏻 Yusef,

This tutorial is helpful for me. I use the second method of embedding a YouTube video from the block editor. That is the one I know how to do.

I also like the HTML coding part for customization for specific parameters, as you described in the screenshots.

When the internet started in the early 90s, I took several classes to learn HTML coding because it was mandatory for us in the workplace to know how to use it.

I appreciate you sharing the HTML coding techniques. I am saving this tutorial. I forgot a lot of HTML coding because it has been over 30 years of not using it.

To get HTML coding, I would ask ChatGPT to help me out. I did one for creating three landing pages with different color buttons. I found that easier than using the block editor.

The HTML coding in this tutorial looks simple enough and easy to do.

You worked hard on this. Thank you. I am looking forward to learning more new technical training from you. 😀👍

Thank you Brenda.

Well, ChatGPT certainly does help a lot with these tasks.

In general, with the advent of AI, it's now not so much about having the technical know-how, but rather about having the expertise and creativity of knowing how to use the plethora of resources available to everyone.

Yes Chat GPT does well except when it's repetitive and hallucinates.

Very good stuff here. Thanks! Love the screenshot of GothamChess too, lol.

Keen eye Andy!

You're very welcome.

Bookmarked, Yusuf! Well done!

Jeff

Cheers Jeff!

Cheers, Yusuf!

Thanks for your detailed directions for embedding YouTube videos in posts, Yusuf. I have bookmarked this training and will be referring to it often.
Have a wonderful day and upcoming weekend!
-Matt

Thank you very much Matt.

Hope you have a great weekend as well.

See more comments

Login
Create Your Free Wealthy Affiliate Account Today!
icon
4-Steps to Success Class
icon
One Profit Ready Website
icon
Market Research & Analysis Tools
icon
Millionaire Mentorship
icon
Core “Business Start Up” Training