How To Add a YouTube Video to Your Web Site

By Malak Ghayoor

Embedding a video into a web page used to be a real challenge in the early days of the web. You had different formats to chose from, other visitors might not have the proper software installed to see the video, and bandwidth was still limited, as many people were still on dialup. Fast forward to 2011. Most people now have broadband, and although there are still many video formats, the most commonly used method to embed video today is via the Flash player and an .flv file which is provided via an external host, such asYouTube.

On a side note, if you are interested in viewing HTML5-based videos on YouTube, we have written an article specifically about the topic, including specific directions for doing so. And if you are interested in editing YouTube videos and adding annotations, we have an article for that as well.

YouTube Videos On Your Site

Now, embedding a video onto a web page becomes as easy as cutting and pasting. When you visit a site that hosts videos, such as YouTube, you are presented with a video box on the page. You can watch the video directly on the page, or the Flash player allows you to view the video full screen, just by clicking a button on the player. How much does it cost you to add a video from YouTube to your site? Nada--nothing. They provide the service, and they also provide the bandwidth, so the video is hosted on their servers and uses their bandwidth! Hard to beat a deal like that!

Here's an example of a YouTube video that is directly embedded into this page.

How do you do it? When you locate a video you'd like to add to your page on YouTube, look below the video for a Share button as shown below.

When you click the Share button, the HTML code used to embed a link that video is displayed directly below it, however that's not what we are after--we want to directly embed the video into the page. We do that by clicking the Embed button which is displayed directly below the Link URL, as shown below.

Once you click the Embed button, you will see the HTML code for embedding the video, as shown below.

By clicking your mouse within the new embed code (in the form field), all the text in that field is highlighted. You then right mouse click in that field, and select Copy from your browser's drop down that will appear when you right click in the field, as shown here:

Here's what the embed code looks like for the video above:

<iframe title="YouTube video player" class="youtube-player" type="text/html" 
width="640" height="390" src="http://www.youtube.com/embed/W-Q7RMpINVo"
frameborder="0" allowFullScreen></iframe>

Then, open the source code of your web page, and using a tool such as NotetabPro orExpression Web, paste it into your page (either right click again where you want it, and select Paste, or place the mouse cursor where you want it, and hit Control and V on your keyboard at the same time. The embed code will be thusly deposited into your web page. Save the page, upload it to your web server using an FTP client, and view it in your browser!

It works in Firefox, MSIE, Chrome, Opera and just about any new browser out there. Most browsers come preinstalled with Flash, and if not, the visitor will usually be prompted by the browser to download the appropriate software. If you can see the video above, then you can see any video from YouTube. There are other video providers, and most use the same method of letting users embed video.

Changing the YouTube Video Window's Look and Features

Not only have the fine folks at YouTube seen fit to allow web developers, bloggers, and evennormal people to embed videos directly into their own websites, they've made some options available so you can customize how the video window looks and behaves. You are able to select a checkbox for each option directly below the spot where the embed code appears.

This enables you to include related videos (like you often see when you watch videos yourself), use HTTPS--a more secure protocol, or enable YouTube's privacy enhanced mode, which allows users to view the video without storing any information in cookies related to the videos the user has viewed. You can also choose to use the "old style" embed code if you wish.

The other nice feature they provide, located even further below the embed code on the video page, is the ability to sele the size you want the video window to use. YouTube allows you to choose from four sizes, plus a custom size, as shown below:

When you select a size by clicking the radio link button for a particular size, the HTML code in the Embed box is updated so you can copy and paste it into your web page.

Adding a YouTube Video To Social Network Pages, Blogs, Etc.

Some of you may be more interested in adding videos from YouTube to your social networking profile pages or walls, blogs or other pages. YouTube makes that even easier than adding videos manually as shown above. You just follow the same procedure you previously followed and click the Share button like before. If you're hoping to add the video to a Facebook, Twitter or Google+ account, you simply click on the social networking site's icon:

When you do that, a window will open up which will allow you to grant permission to access your social networking account, and it will allow you to add a comment and select the people or lists that will be allowed to view it. If you wish to add it to others, YouTube is equipped to allow you to add it to the following sites:

orkut
tumblr
Blogger
MySpace
hi5
Bebo
StumbleUpon

To access the social networking buttons for these sites, click on the Show More link next to the social networking icons shown above, and you will be presented with the following:

The process is the same as it was for adding a video to Facebook--just click the icon, login and allow access to your social networking account, and submit it. It will be added to your wall, profile or blog just like that--it really can't get any easier.

Conclusion: Now You Know How To Embed Video Into Your Pages

As you can see, adding a video to your site is not only simple, it's versatile! So get out there and start adding videos to your sites! Have fun!

Malak Ghayoor

Saturday 14 February 2015