The ultimate html resource About the Double-Underlined Links INTRODUCTION home | about | non-technical introduction newsletter archive | PRIMERS html| MySpace html| ad banners| perl & cgi| asp| javascript| database - sql| HTML & GRAPHICS TUTORIALS getting started| backgrounds| buttons| browser specific| colors| forms| frames| html 4.01 tags| html 4.01 ref| image maps| tables| web graphics| BEYOND HTML asp| cascading style sheets| css keyword ref| cgi scripting| dhtml/layers| dot net| java applets| javascript| javascript keyword ref| javascript script tips| php| security| SEO| vb script keyword ref| webmaster tips| webmaster projects| webmaster toolbox| video| xml| general reference pieces| the master list| NEED HELP? discussion boards| mentors| technology jobs| WEB DEVELOPMENT earthwebdeveloper.com| javascripts.com| Become a Partner internet.commerce HTML Goodies : HTML and Graphics Tutorials : Web Graphics Tutorial: How To Add a YouTube Video to Your Web Site Web Development Daily Newsletter Other Related Newsletters How To Add a YouTube Video to Your Web Site By Scott Clark 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 2010. 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 as YouTube. 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. Naturally the video is about....how to add videos to your site! He's using Camtasia software, after having created the video himself....much more complicated than the manner I'm showing you here, but I thought it was an appropriate video to include. 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 an <Embed> link as shown below. When you click the Embed link, the HTML code used to embed that video is displayed directly below it. 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. Here's what the embed code for the video above looks like: <object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/GwQMnpUsj8I&hl=en&fs=1"> </param><param name="allowFullScreen" value="true"> </param><param name="allowscriptaccess" value="always"> </param><embed src=http://www.youtube.com/v/GwQMnpUsj8I&hl=en&fs=1 type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed></object> Then, open the source code of your web page, and using a 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, 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 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), show a border around the video window, and 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. The other nice feature they provide, located even further below the embed code on the video page, is the ability to select a color theme for your video's border, as well as the size you want the video window to use. YouTube allows you to choose from four sizes: 445X364 500X405 660X525 980X765 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! Tools: Add htmlgoodies.com to your favorites Add htmlgoodies.com to your browser search box IE 7 | Firefox 2.0 | Firefox 1.5.x Receive news via our XML/RSS feed