Menu
Hi All
I’m using the tubeplayer ([url]http://www.tikku.com/jquery-youtube-tubeplayer-plugin#tubeplayer_tutorial_4
However, to put something on top, like a div, on the youtube movie seems impossible (in Chrome).
Below is my test code, I’m trying to put the green square over the movie. It has to do with the wmode, its not set to ‘transparent’ somehow. Any suggestions ?
[CODE]
<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js”></script>
<script src=”http://www.tikku.com/scripts/ui/tubeplayer/jQuery.tubeplayer.min.js”></script>
<script>
$(function(){
jQuery(“#youtube-player-container”).tubeplayer({
width: 600, // the width of the player
height: 450, // the height of the player
allowFullScreen: “true”, // true by default, allow user to go full screen
initialVideo: “DkoeNLuMbcI”, // the video that is loaded into the player
preferredQuality: “default”,// preferred quality: default, small, medium, large, hd720
onPlay: function(id){}, // after the play method is called
onPause: function(){}, // after the pause method is called
onStop: function(){}, // after the player is stopped
onSeek: function(time){}, // after the video has been seeked to a defined point
onMute: function(){}, // after the player is muted
onUnMute: function(){} // after the player is unmuted
});
}) ;
</script>
</head>
<body>
<a href=”#” onClick=’jQuery(“#youtube-player-container”).tubeplayer(“play”)’>
Play video in player
</a>
<a href=”#” onClick=’jQuery(“#youtube-player-container”).tubeplayer(“pause”)’>
Pause player
</a>
<a href=”#” onClick=’jQuery(“#youtube-player-container”).tubeplayer(“stop”)’>
Stop player
</a>
<a href=”#” onClick=’jQuery(“#youtube-player-container”).tubeplayer(“mute”)’>
Mute player
</a>
<a href=”#” onClick=’jQuery(“#youtube-player-container”).tubeplayer(“unmute”)’>
Unmute player
</a>
<div id=’youtube-player-container’ style=”position:absolute;”> </div>
<div style=”height:200px;width:200px;position:absolute;top:0px;background-color:green;z-index:1000000″></div>
</body>
</html>