ansaurus

Question

How to change the video playing in Youtube embedded player ?

Answer 1

A:

Look at the jquery youtube plugin: http://saidur.wordpress.com/2007/12/03/jquery-youtube-beta-plugin/

You have a demo here:

http://bijon.rightbrainsolution.com/youtube/video.html

Exact the same interface as you need, after you searched the videos. (So you can get rid of searching feature)

Hope this helps.

alexl 2009-03-27 11:36:01

I have found it... but no use for find, and i dont like the popup...

marc-andre menard 2009-03-27 11:40:25

Answer 2

A:

If you dun like the popup just get rid of it:

function play(id)
    {
       var html  = '';

       html += '<object >';
       html += '<param name="movie" value="http://www.youtube.com/v/'+id+'"&gt;&lt;/param&gt;';
       html += '<param name="autoplay" value="1">';
       html += '<param name="wmode" value="transparent"></param>';
       html += '<embed src="http://www.youtube.com/v/'+id+'&amp;autoplay=1" type="application/x-shockwave-flash" wmode="transparent" ></embed>';
       html += '</object>';

       return html;
    };

<div id="button1" />
<div id="playvideo" />

$("#button1").click(function() { $("#playvideo").html(play("YOURVIDEOID")); });

Hope this helps

alexl 2009-03-27 11:50:34

i lie to have a <a href> to the <li> pass as the YOURVIDEOID param ! it is possible ?

marc-andre menard 2009-03-27 13:48:44

this line is not working : $("#playvideo").html(play($(this).href));

marc-andre menard 2009-03-27 14:00:16

Answer 3

A:

here is the final solution :

http://www.studioteknik.com/youtube/index2.html

here is the final code :

<script type="text/javascript"> 
    $(document).ready( function(){
     $(".button").click(function() {
     console.log($(this).find("a").attr("href"));
     $("#playvideo").html(play($(this).find("a").attr("href"))); 
     return false; 
     });
    });
</script>

</head>

<body>

<div>
  <ul>
    <li class="button"><a href="MzfAvHlIVjE&hl=en&fs=1">Video 1</a></li>
    <li class="button"><a href="uN2OGjsLuY8&hl=en&fs=1">Video 2</a></li>
    <li class="button"><a href="EZOTMcqaH98&hl=en&fs=1">Video 3</a></li>
    <li class="button"><a href="PSTDZEZV72Q&hl=en&fs=1">Video 4</a></li>
    <li class="button"><a href="QYlOaoqgMdw&hl=en&fs=1">Video 5</a></li>
    <li class="button"><a href="GEcBhbXEFz8&hl=en&fs=1">Video 6</a></li>
    <li class="button"><a href="cU6sJ0CQWAc&hl=en&fs=1">Video 7</a></li>
    </ul>
</div>

marc-andre menard 2009-03-27 14:36:13

Answer 4

A:

$('#video-player object embed').attr('src', 'http://www.youtube.com/v/' + id + '&hl=en&fs=1&&autoplay=1');

this seems to work too, although still causes the repaint of the flash player, doh

2009-04-23 07:53:42

Answer 5

A:

Marc-Andre Menard - can you modify the script so that one of the videos automatically loads on page load?

2009-08-21 22:27:37

Answer 6

+1 A:

check out the jQuery TubePlayer Plugin --

the plugin handles the player initialization for you and you'd be able to get full control of the player.. allowing you to put jQuery("#player").tubeplayer("play", "[videoId]") on the event handler on your li's..

Nirvana Tikku 2010-07-25 23:52:38

ansaurus

tags:

views:

answers:

How to change the video playing in Youtube embedded player ?

related questions