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 the results. 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.

Update '15: YouTube changed the API again significantly. They force us now to use the new slower, and more difficult data API. Worst of all, you now need a YouTube API key: get your own stupid key. It works for YouTube API v3, but I won't longer actively support this code.

Action: Query: Results: Views & duration:
Player: Results:


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"


A YouTube playlist: Music Videos by VEVO


YouTube User videos: yvo


A simple inline YouTube video search


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'></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>ytEmbed.init({'block':'youtubeDiv','type':'search','q':'baby laughing','results':'4','meta':'true'});</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:

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> tags, again an example below:

<script>
ytEmbed.init({'block':'youtubeDiv','type':'search','q':'baby laughing'});
</script>

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