Add wmode=transparent option

www/assets/js/data.js

@@ -103,6 +103,7 @@ var USEROPTS = {
     modhat               : getOrDefault("modhat", false),
     blink_title          : getOrDefault("blink_title", false),
     sync_accuracy        : getOrDefault("sync_accuracy", 2),
+    wmode_transparent    : getOrDefault("wmode_transparent", true),
     chatbtn              : getOrDefault("chatbtn", false),
     altsocket            : getOrDefault("altsocket", false),
     joinmessage          : getOrDefault("joinmessage", true),

www/assets/js/player.js

@@ -22,9 +22,11 @@ function removeOld(replace) {
 var YouTubePlayer = function (data) {
     var self = this;
     waitUntilDefined(window, "YT", function () {
+        waitUntilDefined(YT, "Player", function () {
             removeOld();
             self.paused = false;
             self.videoId = data.id;
+            var wmode = USEROPTS.wmode_transparent ? "transparent" : "opaque";
             self.player = new YT.Player("ytapiplayer", {
                 height: VHEIGHT,
                 width: VWIDTH,
@@ -35,7 +37,8 @@ var YouTubePlayer = function (data) {
                     controls: 1,        // Show controls
                     iv_load_policy: 3,  // No annotations
                     modestbranding: 1,  // No logo
-                rel: 0              // No related videos
+                    rel: 0,             // No related videos
+                    wmode: wmode
                 },
                 events: {
                     onReady: function () {
@@ -57,9 +60,11 @@ var YouTubePlayer = function (data) {
                 }
             });
             $("#ytapiplayer").css("border", "none");
+        });
+    });
 
     self.load = function (data) {
-            if(self.player.loadVideoById) {
+        if(self.player && self.player.loadVideoById) {
             self.player.loadVideoById(data.id, data.currentTime);
             if(VIDEOQUALITY)
                 self.player.setPlaybackQuality(VIDEOQUALITY);
@@ -68,17 +73,17 @@ var YouTubePlayer = function (data) {
     };
 
     self.pause = function () {
-            if(self.player.pauseVideo)
+        if(self.player && self.player.pauseVideo)
             self.player.pauseVideo();
     };
 
     self.play = function () {
-            if(self.player.playVideo)
+        if(self.player && self.player.playVideo)
             self.player.playVideo();
     };
 
     self.isPaused = function (callback) {
-            if(self.player.getPlayerState) {
+        if(self.player && self.player.getPlayerState) {
             var state = self.player.getPlayerState();
             callback(state != YT.PlayerState.PLAYING);
         } else {
@@ -87,15 +92,14 @@ var YouTubePlayer = function (data) {
     };
 
     self.getTime = function (callback) {
-            if(self.player.getCurrentTime)
+        if(self.player && self.player.getCurrentTime)
             callback(self.player.getCurrentTime());
     };
 
     self.seek = function (time) {
-            if(self.player.seekTo)
+        if(self.player && self.player.seekTo)
             self.player.seekTo(time, true);
     };
-    });
 };
 
 var VimeoPlayer = function (data) {
@@ -111,6 +115,8 @@ var VimeoPlayer = function (data) {
             iframe.attr("webkitAllowFullScreen", "");
             iframe.attr("mozallowfullscreen", "");
             iframe.attr("allowFullScreen", "");
+            if(USEROPTS.wmode_transparent)
+                iframe.attr("wmode", "transparent");
             iframe.css("border", "none");
 
             $f(iframe[0]).addEvent("ready", function () {
@@ -195,7 +201,8 @@ var VimeoFlashPlayer = function (data) {
         };
         var params = {
             allowfullscreen: true,
-            allowScriptAccess: "always"
+            allowScriptAccess: "always",
+            wmode: USEROPTS.wmode_transparent ? "transparent" : undefined
         };
         swfobject.embedSWF(url,
                            "ytapiplayer",

www/assets/js/util.js

@@ -451,6 +451,13 @@ function showOptionsMenu() {
     syncacc.val(USEROPTS.sync_accuracy);
     addOption("Synch Accuracy", syncacc);
 
+    var wmcontainer = $("<label/>").addClass("checkbox")
+        .text("Allow transparency over video");
+    var wmodetrans = $("<input/>").attr("type", "checkbox")
+        .appendTo(wmcontainer);
+    wmodetrans.prop("checked", USEROPTS.wmode_transparent);
+    addOption("Transparent wmode", wmcontainer);
+
     var vidcontainer = $("<label/>").addClass("checkbox")
         .text("Hide Video");
     var hidevid = $("<input/>").attr("type", "checkbox").appendTo(vidcontainer);
@@ -509,6 +516,7 @@ function showOptionsMenu() {
         USEROPTS.layout               = layoutselect.val();
         USEROPTS.synch                = synch.prop("checked");
         USEROPTS.sync_accuracy        = parseFloat(syncacc.val()) || 2;
+        USEROPTS.wmode_transparent    = wmodetrans.prop("checked");
         USEROPTS.hidevid              = hidevid.prop("checked");
         USEROPTS.show_timestamps      = showts.prop("checked");
         USEROPTS.blink_title          = blink.prop("checked");