YouTube Chromeless/JavaScript API Player Full-Screen Button

Question

I have implemented chromeless player and so far the necessary controls such as play, pause, change video, mute, unmute all appear to work fine through JavaScript. I now need to send the chromeless player to "Full Screen" mode via JavaScript.

The JavaScript API player includes the full screen button but the chromeless player does NOT; infact; the chromeless player is not supposed to contain ANY button. I therefore need to set full screen mode via JavaScript but could not find any documented method for this. Any idea if this is possible or not?

FYI, I am using SWFObject to embed the player.

References:

• YouTube JavaScript API Player Reference
• YouTube Chromeless Player Example

Answer 1

There is a player.setSize(width:Number, height:Number) method on the player object.Have you used that.I am using ActionScript though and setSize is working for me.

Looking at the documentation 'You should not have to use this method in JavaScript as the player will automatically resize when the containing elements in the embed code have their height and width properties modified.'

I am not a javascript expert but i would suggest...you can put the player in a div tag and on click the 'fullscreen' button or icon you reset the size of that div to '100%' and i think the player would automatically increase to that size

Hope this helps.

Answer 2

In Webkit (Chrome 15 and later, Safari 5.1 and later), try element.webkitRequestFullScreen() and element.webkitCancelFullScreen() where "element" is your player object.

In Gecko (Firefox 10.0 and later), check out element.mozRequestFullScreen() and element.mozCancelFullScreen().

You can tell whether the Webkit method will work by asking

supportsFullscreen: function () {
    return !(typeof document.webkitIsFullScreen == "undefined")
}

Answer 3

Flash itself doesn't support Fullscreen through the javascript API, because people would abuse it. It requires the user click to be on the flash movie itself.

The suggestions above of making the containing div 100%, and then using the requestFullScreen browser APIs are your best bet. That's what video.js does.