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. Forward to 2011. Most people then had broadband, and although there were still many video formats, the most commonly used method to a a video to your web site was via the Flash player and an .flv file which is provided via an external host, such as YouTube. Forward to today, and it is now common place for videos to be placed in web sites, social media and more. The process for adding a YouTube video to your web site has remained relatively close to the same as well!
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.
Adding 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 also displayed below the video, as shown similar to what is 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 your favorite tool such as NotetabPro or Expression 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 of the newer browser out there. Older code for embedding YouTube videos used Flash, which was preinstalled on most older browsers, and if not, the visitor will usually be prompted by the browser to download the appropriate software. Today, YouTube actually uses HTML5, which nearly all current browsers support without the need to download an added player. If you can see the video above, then you can should be able to use 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 even normal 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:
- Google+
- orkut
- tumblr
- pintrest
- LiveJournal
- digg
- Blogger
- 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!
Related HTML Articles
If you enjoyed this article, then you might also like the following that bring your web page to HTML5
How to Embed Video Using HTML5
Embedding video on site using HTML5 is simple. Getting it to work for everyone viewing your site is the hard part. Learn about HTML5’s <video> tag and how to work with competing video formats. You’ll also discover how to build code that works in any browser, even pre-HTML5.
Crank Up the Volume with HTML5 Music
With HTML5, music is making a comeback on the Web. In this tutorial we will show you how to create amazing music experiences for visitors to your website–and it’s as easy as inserting an image.
# # #
