Home arrow HTML arrow How to Add YouTube Videos to Your Website
HTML

How to Add YouTube Videos to Your Website


Adding or embedding a video to your website is a great way to increase visitor interest. While the process of embedding a video into a web page used to be difficult, it has become much easier as of late. This is especially true when it comes to the popular YouTube site and its humongous library of videos. Thanks to YouTube, you can now embed a video into your website by simply copying and pasting code. The process is free, and YouTube will even provide the bandwidth.

Author Info:
By: wubayou
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
March 02, 2011

print this article
SEARCH DEVARTICLES

Adding or embedding a video to your website is a great way to increase visitor interest. While the process of embedding a video into a web page used to be difficult, it has become much easier as of late. This is especially true when it comes to the popular YouTube site and its humongous library of videos. Thanks to YouTube, you can now embed a video into your website by simply copying and pasting code. The process is free, and YouTube will even provide the bandwidth.

Although embedding videos used to mean that you could run into complications in terms of compatibility amongst visitors and their setups, you should not have such problems now. After the YouTube video is embedded, users with web browsers that support Flash (Internet Explorer, Google Chrome, Mozilla Firefox, etc.) will be able to view it. If for some reason they cannot view the video due to lack of Flash, they should receive a prompt to download the software.

To begin adding a YouTube video to your website, visit YouTube and select your video of choice. If you look directly below the video, you will see a line of buttons that allow you to Like, Add to, Share, or Embed the video. Click on Embed.




You should now see a box containing the video's embed code in HTML.  If you left-click once in the box, all of the code will be highlighted. Once the embed code is highlighted, right-click in the box and Copy the code. The embed code for the music video used in this example is the following:

<iframe title="YouTube video player" width="1280" height="750" src="http://www.youtube.com/embed/UePtoxDhJSw" frameborder="0" allowfullscreen></iframe>

Now that you have the code copied, it's time to paste it into your web page. Use your usual HTML editor to open your web page's source code. Navigate to the spot where you want the video to appear on your web page, and paste the video's embed code. You can paste the code using the Ctrl + V shortcut, or you can right-click and select Paste.

If everything looks fine and you have the embed code where you want it, save your work. You can now use an FTP client to upload the page to your web server to make it official.

Depending on your web page's purpose and layout, you may find that the default YouTube embed settings are not your style. Luckily, YouTube allows you to tweak the video's settings prior to embedding it into your web page. Tweaking the settings is as simple as can be, and YouTube will automatically adjust the HTML code accordingly.

As for the adjustable settings, the first is the ability to include related videos. This offers suggestions to other, related videos your visitors might want to see. The second option is to enable privacy-enhanced mode. This restricts YouTube from setting cookies for users who visit your page, but do not click to play the video itself. 

Another available option is to use HTTPS. This option is useful if your site supports HTTPS and you do not want a mixed content warning to appear when someone tries to access it. The fourth option is to play the video in HD, which is self explanatory. The fifth embedding option is to use the old embed code.  Use this option if the site you are using rejects the new embed code that begins with <iframe.

Your final options deal with the size of the video. The default size is 1280 x 750. You can change the video to 560 x 349, 640 x 390, 853 x 510, or a custom size, however.

Now that you see just how easy it is to add a YouTube video to your website, go ahead and try it out for yourself. It takes little time to do, and it can be corrected quickly as well, if you decide you no longer want the video on your site.


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

All HTML Tutorials
More By wubayou


blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials