Contextual Videos

A contextual video is to a video included with the video player what contextual advertising is to legacy static banners.

Using the API Youtube let us illustrate an article by adding videos that Youtube will choose based on keywords in the page or in the section where you put this video. This allows you to automatically update a page according to the news ...

To achieve this rather simple mounting indeed, we do use the API Youtube and its search function. And to improve the effect, we also use the videobar widget that displays a thumbnail as easy to incorporate into the text than an image...

How it works

To achieve this result, we start from the videobar widget, provided with the API Youtube.
The code of the gsvideobar.js file has been modified to display one video at a time.

The code specific to the page (see the HTML code of the demo) is reused in many instances if you want to add more videos in the same page.
Each time, you must choose keywords specific to the text that you want to illustrate. These keywords will be separated by an underscore, and assigned to the executeList variable.

Battlestar Galactica for example:

executeList : [  "battlestar_galactica" ]

Cosmetics for example:

 executeList : [  "cosmetics" ]

We call the function of each video with the setOnLoadCallback method of the API:

GSearch.setOnLoadCallback(LoadVideoBar);
GSearch.setOnLoadCallback(LoadVideoBar1);

Each video must have its own identifier and that is given as parameter to the API Youtube:

var barContainer = document.getElementById("battlestar");
var barContainer = document.getElementById("cosmetics");

To simplify the demonstration, we have downloaded JavaScript and style sheets files. But the API is in beta version, you should for a final application use the latest files provided by Google.

Demo

Download the code and the demo.
The source code of the demo contains all the elements necessary to insert contextual videos into your articles.