How to Embed YouTube Videos on Your Website

YouTube is the most popular video hosting and sharing platform and in this tutorial, we will demonstrate how to embed YouTube videos on your website.

When it comes to embedding videos, YouTube offers a number of customization options for you to provide a better video experience to your visitors on your website. Let's start with how to simply embed a YouTube video on any web page.

Embedding a YouTube Video on a Web Page

1. Go to YouTube and open the video that you want to embed.

2. Below the video, you will see a small navigation menu that has options such as Add To, Share and More. Click on Share.

3. From the submenu, select Embed. You will see the embed code prepared and pre-selected for you within a textbox.

How to Embed YouTube Videos on Your Site - 1

(Google, Google logo and YouTube are registered trademarks of Google Inc., used with permission.)

4. Simply copy this embed code and paste it into where you want to embed it on your web page.

Here is a sample embedded YouTube video using the code above:

Change the Size of the Video

By default, the embed code is created for a video size of 560 x 315 pixels. You can easily change the size of the video using the Video size option below the embed code box, by clicking Show More.

How to Embed YouTube Videos on Your Site - 2

Either select one of the available sizes or enter a custom size that you want. As you can see, the embed code will automatically update with the new size values. Note that the minimum width for a displayable video should be 200 px.

Below is a sample for a custom size video (480 x 270):

Remove Related Videos at the End of the Video

Often times, if your video is a business related video, demonstrating a product or service, you may want to get rid of the related video links that are displayed at the end of the video. You can easily do that by unchecking the Show suggested videos when the video finishes option just below the video size option.

This basically adds ?rel=0 to the end of the video embed URL:

http://www.youtube.com/embed/dWjpjTrRRsM?rel=0

Here is an example for that:

Play the Video Automatically When the Page Loads

I personally don't like web pages that play videos or music automatically, and I don't think the majority of web users would be happy with that. Imagine that your visitor is at the office or in the library etc. and forgot to turn off the speaker and the page she just opened suddenly autoplays a video with all that loud music.

Anyway, if you still want to use the autoplay feature, simply add ?autoplay=1 to the end of the video embed URL like this:

http://www.youtube.com/embed/dWjpjTrRRsM?autoplay=1

If you want to both autoplay and remove the related videos at the end, simply add ?rel=0&autoplay=1 to the end of the video embed URL.

http://www.youtube.com/embed/dWjpjTrRRsM?rel=0&autoplay=1

Note the use of & between the parameters (rel, autoplay).

Hide Video Controls

Some webmasters or marketers may think hiding the video controls work better since the visitor feels that she needs to sit and watch the whole video at one go. I am not one of them. As a web user, I like to have video controls on videos I am watching and as a marketer I like to provide video controls on my videos.

Regardless, if for any reason you want to hide video controls, simply add ?controls=0 to the end of your video embed URL.

http://www.youtube.com/embed/dWjpjTrRRsM?controls=0

Here is an example for that:

Not Autohide Video Player Controls Once the Video Starts

By default, the control bar at the bottom of the video is visible on the embedded video and once the video is started, the control bar autohides by fading out. If you want to keep the control bar and not autohide it, you can add ?autohide=0 to the end of the video embed URL.

http://www.youtube.com/embed/dWjpjTrRRsM?autohide=0

autohide=2 is the default value and not needed to be specified, autohide=1 displays the control bar before starting the video and then autohides it about two seconds after the video starts.

Below is an example of a video with sticky control bar using ?autohide=0:

EDIT: The support for this attribute is deprecated for HTML5 players (such as on this page), but it will continue to work on AS3 players.

Change the Color of the Video Progress Bar

By default, the color of the video progress bar is red. You can change it to white using the color parameter, ?color=white.

http://www.youtube.com/embed/dWjpjTrRRsM?color=white

Here is an example for that:

Disable Keyboard Controls

If you want to disable keyboard controls on your video (spacebar and arrow keys) you can do that by adding ?disablekb=1 to the end of the video embed URL.

http://www.youtube.com/embed/dWjpjTrRRsM?disablekb=1

Here is an example for that:

If you truly want to give no control to your visitor, which I would not recommend, you can combine this with hiding controls and use the following:

http://www.youtube.com/embed/dWjpjTrRRsM?controls=0&disablekb=1

In this case, only pausing/playing by a mouse click will work.

Remove YouTube Logo from the Control Bar

You can remove the YouTube logo from the control bar by adding ?modestbranding=1 to the end of the video.

http://www.youtube.com/embed/dWjpjTrRRsM?modestbranding=1

Here is an example for that:

Remove Title Bar

You can remove the title bar on your video by adding ?showinfo=0 to the end of the video embed URL.

http://www.youtube.com/embed/dWjpjTrRRsM?showinfo=0

Here is an example for that:

Change the Theme of the Control Bar

By default, the control bar uses the dark theme. If you want to use the light theme, simply add ?theme=light to the end of your video embed URL.

http://www.youtube.com/embed/dWjpjTrRRsM?theme=light

Here is an example for that:

EDIT: The support for this attribute is deprecated for HTML5 players (such as on this page), now you don't have any control on the button colors.

These are some of the mostly used YouTube embedded video player customizations, if you want to learn about more parameters and get into more technical details, you can visit the following two links on Google's developer resources pages:

YouTube Embedded Players and Player Parameters
YouTube JavaScript Player API Reference

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in