This is a message.

Stream videos from youtube

Embed a youtube stream with minimal configuration



standalone demo

The Flowplayer youtube plugin and the Flowplayer playlist plugin make embedding youtube streams effortless. This demo streams a video from youtube and also displays a list of related videos as a scrollable playlist. The related video information is fetched via the YouTube API.


The player container href value contains the clip URL that points to a YouTube video ID.

<!-- player container-->
<div class="playerbox">
<a id="related" class="player" href="api:Q_6qRyYn-68" style="float:left;width:440px;height:350px;"></a>
<div id="content-container">
<div id="description"></div>
<div id="category">
<span id="category-content"></span>
<div id="tags">
<span id="tags-content"></span>

<div id="playlist1" class="playlist"></div>
<br clear="all" />



The clip object sets the YouTube plugin to be the video's streaming provider and URL resolver:

flowplayer("related", "", {
plugins: {
youtube: {
url: "/media/swf/",
enableGdata: true,
loadOnStart: true,
onVideoRemoved: function() {
console.log("Video Removed");
onVideoError: function() {
console.log("Incorrect Video ID");
onEmbedError: function() {
console.log("Embed Not Allowed");
onApiData: function(data) {
// use the function defined above to show the related clips
console.log("Received data");
// use the function defined above to show the related clips
showInfo(data, "#playlist1");
//load the related list for the first clip only
if (shownRelatedList) return;
showRelatedList(data, "#playlist1");
shownRelatedList = true;
displayErrors: true
clip: {
provider: 'youtube',
url: 'api:YE7VzlLtp-4',
autoPlay: false
log: {
level: 'debug',
filter: '*, org.flowplayer.controller.*'
}).playlist("#playlist1", {continuousPlay: true, template: playlistTemplate});


Here is the code for loading the related videos playlist:

function formatContent(text){
if (text) {
text = text.replace(
var full_url = url;
if (!full_url.match('^https?:\/\/')) {
full_url = 'http://' + full_url;
return '<a href="' + full_url + '" target="_blank">' + url + '</a>';
).replace(/(\r\n|\r|\n)/g, "<br />");
return text;
function showInfo(gdata, container) {

function showRelatedList(gdata, container) {
var relatedVideos = gdata.relatedVideos;
var content = '';
content += "\t" + '<a href="'+ gdata.url +'" class="first active">' + "\n";
content += "\t\t" + '<img src="'+ gdata.defaultThumbnail +'"/>' + "\n"
content += "\t" + '<span dir="ltr" class="title" title="'+ gdata.title +'">'+ gdata.title +'</span>' + "\n";
content += "\t" + '<span class="stat">by ' + + '</span><span class="stat view-count">'+ gdata.statistics.viewCount +' views</span>' + "\n";
content += "\t\t" + '<span class="video-time">' + gdata.duration + '</span>' + "\n";
content += "\t" + '</a>' + "\n";
//add the html for the first playlist item

jQuery.each( relatedVideos, function(index, item){
url: item.url,
thumbnail: item.defaultThumbnail,
yttitle: item.title,
views: item.statistics.viewCount,
ytduration: item.duration


$("#content-container a .view-count").prettynumber({
delimiter : ','

$('#content-container a .video-time').showTime();
var shownRelatedList = false;
var playlistTemplate = "\t" + '<a href="${url}">' + "\n";
playlistTemplate += "\t\t" + '<img src="${thumbnail}"/>' + "\n"
playlistTemplate += "\t" + '<span dir="ltr" class="title">${yttitle}</span>' + "\n";
playlistTemplate += "\t" + '<span class="stat">by ${author}</span><span class="stat view-count">${views} views</span>' + "\n";
playlistTemplate += "\t\t" + '<span class="video-time">${ytduration}</span></a>' + "\n";