Place div's over flash video

[googlexx]

hey guys, I have a border I made using css and div's and want to add a flash video behind this border so the border can overlap the video. I've been trying for hours and can't seem to figure it out.

 

Here is my page:

Code:

 

<div style="float: left; width:730px;"><div class="clsCommonSide">
<div class="f_tb">
<div class="f_bb">
<div class="f_lb">
<div class="f_rb">
<div class="f_tlc">
<div class="f_trc">
<div class="f_blc">
<div class="f_brc">
<div class="cls100_p clearfix">
<!--<h2>[var.lang_latest_videos]</h2>-->

*****FLASH VIDEO HERE******

</div>
</div>
  
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

 

and my css for the borders:

 

Code:

 

.f_tb{
background:url(../images/round/f_tb_full.png) no-repeat 2px 3px;
}
.f_bb{
background:url(../images/round/f_bb_full.png) no-repeat center 354px;
}
.f_lb{
background:url(../images/round/f_lb_full.png) 6px 0px no-repeat;
}
.f_rb{
background:url(../images/round/f_rb_full.png) 706px center no-repeat;
}
.f_tlc{
background:url(../images/round/f_tlc.png) left top  no-repeat;
}
.f_trc{
background:url(../images/round/f_trc.png) 704px top no-repeat;
}
.f_blc{
background:url(../images/round/f_blc.png) 4px bottom no-repeat;
}
.f_brc{
background:url(../images/round/f_brc.png) 655px bottom no-repeat;
}
* html .cls100_p{
width:100%;
}

 

I have added the transparency to the flash video and have tried everything I found in google and nothing works!

[haku]

Set the wmode param of the flashvideo to 'transparent'. If that doesn't work, you may want to try 'opaque'.

[googlexx]

yeah i've tried both and still no result. I'm not sure what else to try

[fortnox007]

well you can always try to look in the forum if there was something alike posted.

Gues what 6 post below your is the same question: http://www.phpfreaks.com/forums/css-help/two-issues/

check it out, if you have difficulties let me know.

cheers!

[googlexx]

yeah, I did search and the problem is that since I have images as a border I I think the flash has to be inside the divs? I've tried making the border without having it inside and it doesnt show up :/

[fortnox007]

Well it depends a bit really if you use absolute positioning, it will use the first element that has a different position than static. But are you sure you want to use, if i count right 8 div's and a clear div to create some nice borders?

I hope it looks awesome otherwise i would find it a waste, certainly since you are using 8 requests for the images.

 

me try to make what you trie with those million images. But it's probably done with absolute positioning. You don't have it online yet? easier to check.

 

Be right back

 

-edit, just a small not, if your using flash video's i bet the size of that widow will be the same since everytime? in that case you don't need the 8 images, ill make a prototype for you and place it online.

[fortnox007]

Here you go... i made a video frame in the background of the flashobject.

You can ofcourse do the same with multiple images:

http://monkeybusiness.hostzi.com/videoframe.php

 

 

If you have any question let me know.

cheers!

 

p.s. I haven't tested it in firefox and it works, if IE is giving trouble let me know i was in a bit of a hurry.

[fortnox007]

I meant, i tested it in firefox lol

 

main stuf is this:

#mid-content{
    width:500px;/*width of the background image*/
    height: 405px;
    margin:0 auto;
    text-align: center;
    background: url('../images/paintingframe.png') no-repeat;
    position:relative; /*parent for object*/
    z-index: 1;
}
#flash{/*container div for flash*/
    position:absolute;
    z-index: -2;
    top:54px;
    left:65px;/* tricky positioning */
}

[googlexx]

thanks for the help. I've tried everything you said and it's still not showing up. This is my html page:

 

<!--Video Player Container.  This is where the player embed code goes-->
<div id="mid-content">
<div id="flash">
<div name="mediaspace" id="mediaspace"></div>
</div>
</div>
<script type="text/javascript" src="[var.base_url]/jw_player/swfobject.js">

var so = new SWFObject("[var.base_url]/jw_player/flvplayer.swf","video","694","343","7");

so.addParam("wmode","transparent");
so.addParam("allowScriptAccess", "always");
so.addParam("allowfullscreen","true");
so.addVariable("bufferlength", "[var.video_buffer_time]");
so.addVariable("fullscreen","true");
so.addVariable("width","690");
so.addVariable("height","346");
so.addVariable("stretching", "exactfit");
so.addVariable("autostart", "false");
so.addVariable("file","[var.video_play]");
so.addVariable("skin","[var.base_url]/jw_player/modieus.zip");
so.addVariable("provider", "http");
so.addVariable("streamer","[var.base_url]/jw_player/xmoov.php");
so.addVariable("logo", "[var.base_url]/images/playerlogos/logo-player.png");
so.addVariable("image","[var.base_url]/uploads/player_thumbs/[var.video_thumb]");
so.addVariable("controlbar", "over");
so.addVariable("volume", "100");

so.write("mediaspace");
</script>
<!--End Video Player Container-->

 

and the css:

 

#mid-content{
    width:762px;/*width of the background image*/
    height: 394px;
    margin:0 auto;
    text-align: center;
    background: url('../images/player_bg.png') no-repeat;
    position:relative; /*parent for object*/
    z-index: 1;
}
#flash{/*container div for flash*/
    position:absolute;
    z-index: -2;
    top:34px;
    left:45px;/* tricky positioning */
}

 

now the flash video is just gone. and all i see is the background image.

[fortnox007]

Well i bet your flash object is there but you don't see it because it's behind ther rest.

Maybe just something that would help in readability of your code, use some indentations, saves others and yourself counting endtags.

Anyways. Maybe just isolate this stuff, from the rest of your page, so youknow how to do this before you use it directly in an original page.

 

Just for now could you maybe change the z-indexes  into positive ones.  So give the top layer maybe something like 100 and the flash object 50 or so. doesn't really matter but i think your directly putting things in your original page and the flash object will end up below everything.

 

Also notice the width of your stuff. You directly copied mine, but it seems your additional flash params have different ones (much wider) so adjust that also to your needs) And maybe also, put this online somewhere, this whole typing thing isn't really efficient.

[googlexx]

alright. I have isolated it on a single page: http://fresnomystery.com/test.html and it still isn't working.

 

this is the main page I have it on: http://fresnomystery.com

 

I'm stuck. I copied everything you had and it's not working on my site :/

[fortnox007]

HEy m8, that is better indeed nice looking site btw.

 

I just check and, and your Div #flash is missing a height and width so adjust that to the size of your flash video.

#flash {
    background: none repeat scroll 0 0 #000000;/* i added a color to show it's there */
    height: 346px;
    left: 22px;
    position: absolute;
    top: 20px;
    width: 690px;
    z-index: 50;
}

 

But for some reason it's overlapping. But at least we have div #flash visible. Maybe someone has ideas? Ill check some out for you.

[fortnox007]

maybe have a look here: http://www.brianyerkes.com/swfobject-help-when-placing-a-div-over-flash/

not sure if it is possible: change transparent to opaque.  Besides that i am thinking thjose extra params are screwing up the total.

[googlexx]

yeah, i've tried both transparent and opaque. I manage to fix the video showing. And for even better testing I added in the exact same code you did for your video. http://fresnomystery.com It shows up but as you can see it still overlaps the background image. I've searched the css file for any other z-index values and it only has the two we have added.

[googlexx]

using your code. you actually didn't put the image over the flash video. I make the video size bigger and this is what i get:

 

http://fresnomystery.com/test/test.html