Switching Between Flowplayer And Youtube video player

In my current project, I had to play videos on a page. The decision was to play those videos on Flowplayer. The issue was that few videos were hosted on youtube. And I think YouTube does not permit to play youtube videos directly with another player. So the only solution was to have two players [ youtube and flowplayer in this case] and switch between them.

UPDATE: You can see this live here

Requirement: I had few thumbnails [ video snapshots ]  in a gallery which when clicked should load the respective video.

I did the following to get the result.

<div id="video-wrap">

   <div id="video"> </div>


Created an empty div with id ‘video’ for the player.

  // fgdata --> XML DOM Object

  $('gallery > item', fgData).each(function(){

     var thumbUrl = $('>thumbnail', $(this)).text();

     var videoType = $('>videotype',$(this)).text();

     var videoUrl = $('>videoUrl', $(this)).text()

     // creating thumbnail elements for the gallery

     $('#gallery ul').append('<li>'

       + '<img src="'+ thumbUrl +'" alt=""/>'

       + '<p id="videotype_'+ i +'">'+ videoType +'</p>'

       + '<p id="video_'+ i +'">'+ videoUrl+'</p>'

       + '</li>');


I parse a XML document for the video urls and the thumbnail urls and I get the video type too .

  $('#gallery ul li').children('img:eq(0)').bind('click', function(){

      switchVideos(videoType, videoUrl);

Each thumbnail image is attached a click event.

  var flowplayerobj= null;
  function switchVideos(vType, vUrl){

     // Unload the flowplayer before deleting the element

        if(flowplayerobj != null)

     // removing the element
        $('#video').text(' ');
     // Creating the element [ #video ] again after removng it.

        $('#video-wrap').append('<div id="video"></div>');

     var vType = vType;

     var vUrl = vUrl;



         $('video').append('<object width="506" height="335"><param name="wmode" value="transparent"></param><param name="movie" value="'+ vUrl +'"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+ vUrl +'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="506" height="335"></embed></object>');







Every time I remove the div containing the video player since I would be switching the players according to the video type.

Note:  If the element contains the flowplayer, it can’t be removed directly. One needs to unload the flowplayer first and then remove the element.

If the video type [vType] is youtube, I embed the youtube player. If not I insert the flowplayer.

  function insertFlowPlayer(url){

    var vUrl = url;

    flowplayerobj = $f("video", {src: '/flash/flowplayer-3.1.5.swf', wmode: 'transparent'}, {

                  // change the default controlbar to tube
                  plugins: {
                             controls: {
                                          url: '/flash/flowplayer.controls-tube-3.1.5.swf',
                                          borderRadius: '0px',
                                          bufferGradient: 'none',
                                          sliderColor: '#c9c9c9',
                                          timeBgColor: '#d5d5d5',
                                          volumeSliderGradient: 'none',
                                          tooltipTextColor: '#000',
                                          buttonOverColor: '#BA1010',
                                          volumeSliderColor: '#aaaaaa',
                                          progressGradient: 'medium',
                                          progressColor: '#BA1010',
                                          bufferColor: '#c78f8e',
                                          backgroundColor: '#e1e1e1',
                                          timeColor: '#000',
                                          sliderGradient: 'none',
                                          buttonColor: '#000',
                                          durationColor: '#000',
                                          tooltipColor: '#d5d5d5',
                                          height: 25,
                                          opacity: 1.0
                  playlist: [
                                  url: imgSrc, //screenshot url onload of the player
                                  scaling: 'fit'
                                  url: vUrl,
                                  autoPlay: false
                                  backgroundColor: '#ffffff'


I have customized the flowplayer so that it looks similar to youtube player when switched.