Copy & Paste Youtube Videos

I've created a small script that lets novice to experienced webmasters and blog owners include a block of YouTube video thumbnails on any place in your website. You can include: playlist videos, user videos, search result videos, and for example a interactive YouTube search.

Generator

This generator will help you create the full code needed to get this all working. You can copy & paste this into your website and your are done.

Action: Search Playlist User Query: Results: 1 2 3 4 5 6 7 8 9 10 Order: newly published highest rated most relevant
Player: embed into site link to youtube Results: thumbnails full format

---

The installation is very simple, provides super fast results, and has a wide set of features. Lets continue with some examples:

All YouTube videos about: "music video"

<div id="youtubeDiv"></div> <script>insertVideos({'block':'youtubeDiv','type':'search','q':'music video','results': 3});</script>

---

A YouTube playlist: britain's got talent

<div id="youtubeDivPlaylist"></div> <script>insertVideos({'block':'youtubeDivPlaylist','type':'playlist','q':'D823412A95CC2EDB','results': 3});</script>

---

YouTube User videos: lonelygirl15

<div id="youtubeDivUser"></div> <script>insertVideos({'block':'youtubeDivUser','type':'user','q':'lonelygirl15','results': 6,'layout':'thumbnails','player':'embed','imgstyle':'3px solid #333'});</script>

---

A simple inline YouTube video search

<form onsubmit="insertVideos({'block':'youtubeDivSearch','type':'search','q':document.getElementById('ytSearchField').value,'results': 5,'order':'most_relevance'}); return false;"> <input type="text" id="ytSearchField" /> <input type="submit" value=" Search " /> </form> <div id="youtubeDivSearch"></div>

---

Installation

To install the YouTube video thumbnail results you can use the generator or follow the instruction below.

First: download this javascript file (4kb), and upload it to your server. On the page that you want the YouTube video thumbnail results to appear include this line in your document (remember to replace yvoschaap.com, with your location of the file):

<script src='http://www.yvoschaap.com/ytcp.js' type="text/javascript"></script>

Up next is finding a nice spot where you want to have the YouTube video thumbnails. Insert there this html code that creates a block with the ID youtubeDiv (must be unique).

<div id="youtubeDiv"></div>

Directly below the code provide the configuration of the YouTube video thumbnails you want to show. An example:

<script type="text/javascript">insertVideos({'block':'youtubeDiv','type':'search','q':'baby laughing','results':'4','order':'new_first'});</script>

The detailed explanation is below, but this code will do a YouTube video search on the newest videos uploaded on "baby laughing" and have 4 thumbnails returned that link to the YouTube video player.

And now comes the part to configure the script to your liking. You must tell the script what kind of videos you want to display on your page, this is done by providing several settings. You can do this by hand as explained below, or with our generator. The settings that are available:

• block - obligated ID of the html element (<div id='this_is_the_block_id'>) where you want the results thumbnails to appear.
• type - obligated setting that provides the function you want to execute:
  • search - YouTube searches for a video with the string set by 'q'.
  • playlist - results of a YouTube playlist set by playlist id in 'q'.
  • user - results of a YouTube user videos set by user name in 'q'.
• q - obligated string to identify your results, see 'type' above.
• results - the number of results you want to show.
• order - what comes first:
  • new_first - newest videos published on top
  • highest_rating - highest rated videos on top
  • most_relevance - most relevant videos on top
• player - decide if you want to play the video on youtube.com or embed on your page:
  • embed - plays the video on your page. This needs to inclusion of SWFObject 2.
  • link - plays the video on youtube.com
• layout - how do you want the results to appear:
  • thumbnails - only a list of thumbnails as result.
  • full - list of results with thumbnail, description, rating and user
• imgstyle - how the thumbnail border appears:
  • 4px solid #333 - a darkish 4 pixel border around the thumbnail.

You use these settings by placing them in this template style 'what':'value'. Separated by a comma. This is then placed within this function insertVideo({'what':'value','what2':'value2'}); surrounded by <script type="text/javascript"> tags, again an example below:

<script type="text/javascript">
insertVideos({'block':'youtubeDiv','type':'search','q':'baby laughing'});
</script>

This piece of script is added below your <div id="youtubeDiv></div>.

To see the non-minified version of the script check it our here the script is freely usable and adjustable. For a more advanced explanation of the YouTube data API and JSON check this article. And if yo think all of this was all too complicated we have a final resort here.