Web Tip add-youtube-to-your-site

Published on June 5th, 2013 | by Mark Ammay

0

Add YouTube to Your Site

Want to add YouTube Videos to your site or blog? It’s pretty simple, but there’s two ways I want to talk about right now on how to add YouTube to your site.

This YouTube guide was requested by my Instagram friends @charlierodartee (thanks for the request).

Option 1: Use the YouTube embed feature (for individual videos)
Option2: Use Ajax/jQuery/Json (for a list of video thumbnails) Download the file – YouTube Ajax Call

Option 1: Use the Embed Code

Using the embed code of YouTube is the most common way to add YouTube videos to your own website. It’s simple:

  1. Go to the video you want to embed
  2. Click on the Embed link underneath the video
  3. Copy and paste the source code
  4. You can also change a few settings of the video

youtube-embed

After choosing the Embed option you can choose to customize your video that you want to add:

youtube-embed-options

Here’s an embedded YouTube video of mine, and the source code I got from the embed code given by YouTube:


Option 2: Custom Ajax call using jQuery and a JSON feed

Now if you want display a list or stream of YouTube videos on your website, you’ll probably want to do this yourself (as opposed to manually embedding each YouTube video). Plus, creating your own Ajax call and reading JSON will allow you to display a YouTube Playlist on the fly (this updates dynamically).

You’ll need to:

  1. Find which playlist you want to display
  2. An example playlist link is: http://www.youtube.com/playlist?list=PL4BAB63A8084DF14E
  3. You’ll want to copy and paste the numbers after “playlist?list=”
  4. This would be a playlist id PL4BAB63A8084DF14E

BELOW is what you’ll get with the following code.

(Known bug – since my example below is in an iFrame, the links don’t open up the way they should. But it should work for you!)

Brief Explanation of this Ajax Call using JSON

What we have here is a page that is using jQuery (a JavaScript Library), to read data. This data is in the form of a JSON object, which can be read.

Using an Ajax call (Ajax stands for  Asynchronous JavaScript and XML), we are pulling the playlist URL which contains the data (in JSON format), and GETTING specific items to create all our YouTube thumbnails and links.

You will need to edit these 2 options:

  • var playListCode = ‘PL4BAB63A8084DF14E‘; // CHANGE THIS TO YOUR PLAYLIST
  • var howManyVideosToShow = 10; // HOW MANY VIDEOS TO SHOW?

Once you change these two variables, you will see your own playlist.


Does Option#2 Make Sense?

Does any of this make sense? Let me know if I need to get more detailed or if you need me to break down exactly what’s going on with the Ajax call using jQuery and JSON.

Tags:


About the Author

Hey it's Mark Ammay. I'm a Web Developer with over 5 years of professional experience in the industry. I help individuals start their own website from scratch, as well as through WordPress. I'm also an Online Entrepreneur who blogs at www.MarkAmmay.com



0 comments
Back to Top ↑