Embedded Object Transparency Making an object transparent

[mrdee 1]

Hi,
does anyone know if it is possible to make a control panel of an embedded object transparant, and if so, could you let me know how it is done?

I put a piece of music on my web site earlier, with a control panel to adjust the volume, start/stop etc.
The problem is, I have also put a Christmassy background on the site and the white area around the control panel makes it look somewhat untidy.
Here is the code I used for the embedding:

<div align="center"><embed src="Music/Stille Nacht.mp3" width=150 height=115 autostart=true align="center" loop="true"></div>

If anyone knows a solution to my problem I would be extremely grateful.

Thanks in advance.

[sonesay 7]

this should work

<div align="center"><embed style="display:none" src="Music/Stille Nacht.mp3" width=150 height=115 autostart=true align="center" loop="true"></div>

[mrdee 1]

Thanks for your reply, sonesav.But I'm afraid it has made no difference.Thanks anyway.

[sonesay 7]

that code did hide the player on my test. can i see a link to your page?

[mrdee 1]

Sure,
it is http://www.vlaanderen-flanders.org.uk/

On the opening page, click on "English" (I assume that is what you wil want to read), and on the next page, click "News" on the menu, which is where the music file is.

Thanks.

[sonesay 7]

I checked out your code on your site

<embed width="150" height="115" align="middle" loop="true" autostart="true" src="Music/Stille Nacht.mp3" style=""/>

style has no value thats probably why. worse case i think if you assign values of 0 to height and width it will hide it lol. or else you can always try assigned the style attribute to the div tag I'm sure it can work there also. if that still dosent work you can always move that div -100 px out of the screen or something.

[mrdee 1]

I don't know how that is possible.
upon inspection of my code I get this:

<div align="center"><embed style="display none" src="Music/Stille Nacht.mp3" width=150 height=115 autostart=true align="center" loop="true"></div>

Just like you passed it on.

Weird.

[sonesay 7]

you definitely need a : in between style="display:none"make sure its like this

style="display:none"

if that still dont work try

style="display:none;"

The first seems to work for me on my local server. maybe its just my broswer rendering it incorrectly and allowing any errors to pass. I'll check again

[mrdee 1]

I see, I had indeed missed the colon out.However, when I did slot it in, the panel was gone, but so was the music.You see, what I meant was, around the panel there is a white square that clashes with the background.I do prefer to have a panel where people can turn the music off if they like, or adjust the volume.What I did ask, really, was whether you could make that panel and its surroundings transparant, so that the background comes through.Thanks.

[sonesay 7]

sorry bud, I never read things properly so its the ugly white space you want to get rid of? I think its caused by the height attribute

height="115"

I think if you lower it it may get rid of the white space but I think this method may have another problem since different broswers will render it differently.yeah I jsut noticed under firefox you will see the white box but under safari it will show only the control bars.I guess a more proper way is to remove background off the <embed> tagyou can try

<embed style="background:none;"

oror

<embed style="background:none"

I'm not sure whats more correct with a ';' or without. hope that works for you.edit: dosent seem to work I'll keep trying this is a annoying little problem.

Edited December 19, 2007 by sonesay (see edit history)

[mrdee 1]

There you go, did it.I lowered the height from 115 to 15, works OK in Firefox and IE.If you could just let me know how Safari shows it.(I did use the "background:none;" too, but I don't think that made any difference).Thanks a lot for your help.

[iGuest 3]

Embedded Objects over ImagesEmbedded Object Transparency

Is it possible to place embedded objects over images in an html document. Example, I would like to place and embedded you tube video over a large image that spans much of the page. Thanks

[iGuest 3]

embedded object transparencyEmbedded Object Transparency

you can change the opacity of the player by using style="filter:alpha(opacity=0)" in the embed tag. Just try this

-reply by Sujal