Fullscreen inside firefox-sdk panel

Question

Here goes my first question. I've embedded a youtube video (HTML5) in a panel created using the Panel API from Firefox SDK. The problem is that the video won't go fullscreen. It tries to, but goes back to normal size within the panel. I've also tried to use the method described here with a random div but the same thing happens. So, is this a limitation from the api or is there any way I could get it to work? Thanks.

Answer 1

I've just started experimenting with a floating YouTube player plugin using the Firefox sdk and ran in to the same issue. I did find a some what sloppy work around, that you might find suitable to use.

This method causes the panel to resize to the full screen. However, when resizing it, even with the border property set to 0, the panel will still show a bit of a border.

in the main document, "index.js"

var self = require('sdk/self');
var data = require("sdk/self").data;
let { getActiveView }=require("sdk/view/core");

let myPanel =  require("sdk/panel").Panel({
    contentURL:  "./index.htm",
    contentScriptFile: ["./youtube.js", "./index.js"]
}); 

var player = getActiveView(myPanel);
player.setAttribute("noautohide", true);
player.setAttribute("border", 0);
player.setAttribute('style', 'background-color:rgba(0,0,0,0);');

myPanel.show();
init();
myPanel.port.on('fullscreen', fullScreen);

function init(){
    var size = 30,
        width = size * 16,
        height = size * 9;
    myPanel.resize(width,height); 
}
function fullScreen(width, height){
    player.moveTo(3840, 0); // Need to moove the video to the top left 
             //of the monitor or else the resize only takes a potion of the screen. 
            //My left position is 3840 because i'm doing this on my right 
           //screen and the left is 4k so i need the offset.
    myPanel.resize(width,height);
}  

And in my content script file

var container = document.getElementById('container'),
    overlay = document.getElementById('overlay');

overlay.addEventListener('click', fullscreen);

function fullscreen() {
    var x = window.screen.availWidth,
        y = window.screen.availHeight;
    self.port.emit('fullscreen', x, y);
}

Some things I've noticed while experimenting is that when playing YouTube videos in the panel, the video has a tendency to lag, but the audio plays fine. The lag gets more apparent when moving the mouse over elements on other pages, and over the panel itself. The faster the movement the more apparent it becomes. I've found a workaround for mousing over the panel by placing an div that stretches over the video. The problem with this is that the default YouTube controls don't react to the mouse over, which would be possible to get around by using the YouTube api and creating custom controls. Also multiple monitor support would be hard to work with when positioning the video.

Edit:

Here's another way that does the same thing, but this one appears to deal with multi monitor support. It will position to the top left of whatever window firefox is currently on.

in the index.js file

function fullScreen(width, height){
   myPanel.hide();
   myPanel.show({position:{left:0,top:0}});
   myPanel.resize(width,height);
}