Showing Youtube Video in Fullscreen mode using Flex

Sometimes, we are getting problem in showing our flex application in fullscreen mode. Normally, we can show our standalone flash swfs in fullscreen mode using fscommand. But, when we are loading flex applications in browser, we need to remember few settings. Here, I am giving one example showing how to embed Youtube Video in Flex and use fullscreen button of Youtube video player to show our flex application in fullscreen mode.

To download the source code click here.

Flex Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[

/****************
*
* @method init()
* @description called on creationComplete
*
*****************/
private function init():void
{
swfLoader.source = "http://www.youtube.com/v/zlfKdbWwruY&hl=en&fs=1";
}
]]>
</mx:Script>
<mx:SWFLoader id="swfLoader"/>
</mx:Application>

Also you need few changes in index.template.html file in html-template folder of your flex project. You need to set allowFullScreen property as true in four places:

In javascript function of your html page:

AC_FL_RunContent(
"src", "playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"allowScriptAccess","sameDomain",
"allowFullScreen","true",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "${swf}",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
"allowScriptAccess","sameDomain",
"allowFullScreen","true",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);

And two parameters of the object tag of HTML Page:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
id="${application}" width="${width}" height="${height}"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> <param name="movie" value="${swf}.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="${bgcolor}" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
width="${width}" height="${height}" name="${application}" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
allowFullScreen="true"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>