This wiki page is motivated by the LPS-11982 and LPS-8157 where overlay problems are detected when using IFrames to embed flash.

There are many approaches to embed flash in a Liferay-based portal.

Using Web-content #

You can create a web content which imports the flash object, just like this:

<object classid="some classid" 
        codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="346" width="749"> 
  <param name="movie" value="... movie URL ..." /> 
  <param name="quality" value="high" /> 
  <param name="flashvars" value="ruta=null" /> 
  <embed flashvars="somename=somevalue" height="..." pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="...movie url ..." type="application/x-shockwave-flash" width="...">
  </embed> 
</object>

In this case, web content author has the control over all parameters of the movie. For example, she can set some interesting parameters to avoid the overlay problem such as

wmode

(see here for the solution of overlay problem and here for a more general description of available options when embedding flash).

As a result, the web content author can set the window mode to avoid overlays:

<object classid="some classid" 
        codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="346" width="749"> 
  <param name="movie" value="... movie URL ..." /> 

  <!-- this adds a param to object tag -->
  <param name="wmode" value="opaque" /> 

  <param name="quality" value="high" /> 
  <param name="flashvars" value="ruta=null" /> 

  <!-- don't forget to add it here too -->
  <embed flashvars="somename=somevalue" height="..." pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="...movie url ..." type="application/x-shockwave-flash" width="..." wmode="opaque">
  </embed> 
</object>

Using IFrames #

When you use an IFrame, referenced URL may or may not have set the right parameters when embedding flash (i.e, in the context of the iframe). It is a common problem to have wrong overlay configuration just because referenced page may not have been designed to be embedded in an IFrame.

In this case, there are two approaches to "take the control" of embed parameters. If the referenced URL is in the same domain that the embedding page (i.e. the layout where we put the iframe portlet), you can use Javascript to modify the overlay behavior. Here you can find examples of how to access IFrame DOM to do such modifications. In addition, you could use YUI/Alloy instead of plain JavaScript, for instance:

   var iframeNode = A.one('#iframeId');
   var iframeDoc = iframeNode.get('contentWindow.document');
   var iframeBody = iframeDoc.get('body');

   ...
   // work with iframeBody var...

If domains are different, browser will enforce the isolation by virtue of a violation of the same origin policy (for readers interested in the subtleties of inter-frame communication, please see here), so the approach is to use web proxy portlet.

Using Web Proxy portlet #

This approach relies on using Liferay as a web proxy that request the page you want to show, process it (applying an XSLT) and renders into the portlet as if content were native to Liferay (i.e. by rewriting links). The effect is that content served through the remote URL is seamlessly integrated with the rest of page contents.

The point is that XSLT can be used to detect <object> and <embed> tags and configure them with proper overlay properties.