Placing a div over Flash or Content over a embed object

This Post Idea was given by my good friend : Hiren Pandya

In my Ongoing Project, there was a problem with placing the content, div or a menu over a flash file. Let me make you see what was the exact problem.

In above picture you can see the red circle where the drop down menu is open and is falling behind the Flash Player with an video streaming.

Some of you may think that it can be solved with simple CSS z-index property … but it will not work here. So its not a CSS problem of a layout fix.

The Solution

Assuming that you know how to embed a video file in a html and if not here is the code

This object of flash needs to have two more lines of code which i will specify in RED

<object id="player" classid="3540000" name="player" width="300" height="200">
              <param name="movie" value="player-viral.swf" />
              <param name="wmode" value="transparent" />
              <param name="allowfullscreen" value="true" />
              <param name="allowscriptaccess" value="always" />
              <param name="flashvars" value="URL" />
              <embed type="application/x-shockwave-flash"
	               id="player2"
	             name="player2"
	              src="player-viral.swf"
	            width="300"
	           height="200"
                    wmode="transparent"
	allowscriptaccess="always"
	  allowfullscreen="true"
	  flashvars="file=URL"
	      />
</object>

I think you may have understood that the wmode with transparent value will keep the video flash object a transparent object can that solved the simple problem and now the image below shows what the menu should have looked at the first place i.e the requirement.

DivOverFlash2

This method works well in all major A-grade browsers. And the best part is that it also supports IE6 :)

<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="300" height="200">
              <param name="wmode" value="transparent" />
              <param name="movie" value="player-viral.swf" />
              <param name="allowfullscreen" value="true" />

              <param name="allowscriptaccess" value="always" />
              <param name="flashvars" value="file=performancefiles/1oxN16NlHSjxs.mp3&image=userimages/t/1Sebx3xvD7KhH.jpg" />
              <embed
			type="application/x-shockwave-flash"
			id="player2"
			name="player2"
			src="player-viral.swf"
			width="300"
			height="200"
             wmode="transparent"
			allowscriptaccess="always"
			allowfullscreen="true"
			flashvars="file=performancefiles/1oxN16NlHSjxs.mp3&image=userimages/t/1Sebx3xvD7KhH.jpg"
		/>
            </object>

12 Responses to “Placing a div over Flash or Content over a embed object”

  1. Arvind

    Hello…
    this coding provided a btr solution…..:)

    Reply
  3. vikas panwar

    Hiii.. Kake,
    This is the gooood idea….provide a code for a new developers….they always searching this type of help….they always give blessings….vry goood… best of luck….

    Reply
  4. Sushant @ Techooze

    yes this problem made me scratch my head till i found a solution to it.
    .-= Sushant @ Techooze´s last blog ..1and1 Six Months Free Hosting and Domain Coupon for 2010 =-.

    Reply
    • Jaspal

      yr welcome

      Reply
  6. Charleston

    Nice tutorial Jaspal. Didn’t expect you’re good in wordpress coding.

    Reply
    • Jaspal

      Thanks .. i enjoy wordpress coding now

      Reply
  7. Cynthia

    I think that your method of placing a div over Flash and over a embed object is interesting I’ll try it on my blog.

    Reply
  8. corrine

    I try your code and it works perfectly for all browsers. However, my websites have lot of flash objects and I try to dynamically set the wmode to the object and embed tag using javascript or jquery. It works for FF, Opera but it doesn’t work for IE.

    Do you have any suggestion/idea? Any help is surely appreciate.

    Example of Jquery code:
    function jQuerydisableFlash(){

    jQuery(document).ready(function() {
    jQuery(‘object’).each(function(){
    jQuery(this).prepend(”);
    var flashHtml = jQuery(this).html().replace (‘<embed ', '<embed wmode="transparent"');
    jQuery(this).html('');
    jQuery(this).html(flashHtml);
    })
    });

    Thanks.

    Reply
  9. Ramírez

    muy buen aporte… thanks… it was very util for me

    Reply
  10. kostas

    Hello,

    Is there a way to make this work for Android? it seems that the flash is always on top there.

    Reply

Leave a Reply