Youtube Simple Embed - Youtube for any page

Easily embed YouTube functionality on your site by integrating a search query, playlist or your account's videos. Integrate the video player. Page through result. All simple as plug and play. Interested? Read on and check out the examples below.

Best is to try out the generator and check out the results.

Generator

This generator will help you create the full code needed to get this all working. You can copy & paste this into your website, optimize to your layout (css) and you're 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>ytEmbed.init({'block':'youtubeDiv','type':'search','q':'music video','results': 3});</script>

---

A YouTube playlist: Guide to Electronic

<div id="youtubeDivPlaylist"></div> <script>ytEmbed.init({'block':'youtubeDivPlaylist','type':'playlist','q':'15040EC432909120','results': 3});</script>

---

YouTube User videos: lonelygirl15 (small player)

<div id="youtubeDivUser"></div> <script>ytEmbed.init({'block':'youtubeDivUser','type':'user','q':'lonelygirl15','results': 6,'layout':'thumbnails','player':'embed','height':250,'width':300,'display_first':true});</script>

---

A simple inline YouTube video search

<form onsubmit="ytEmbed.init({'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:

<script src='/ytembed.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">ytEmbed.init({'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.
  • link - plays the video on youtube.com
• display_first - display the player and queu first video results (needs player set to embed)
  • true
• width: embed player width
• height: embed player height
• 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

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

<script type="text/javascript">
ytEmbed.init({'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.