How to Hide Specific Part of Flash Object Using CSS?

I'm embedding a flash music player from Soundclick into my music website. I have a fixed space where the player is to be placed. The problem is that the players the site offers are too big. The bottom portion of the flash player is all I need to be shown. Is there a way hide this using the overflow:hidden; method?

What I've tried so far:

I placed the embed code into a div container and used the "overflow:hidden;" method, then set a fixed width and height. It works partially, but only displays the top half. Which is useless because the bottom half is where the playlist and the buttons are located.

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyOTAwNzA2MzY3MzkmcHQ9MTI5MDA3MTMwNTU4NyZwPTE1ODM2MSZkPSZnPTEmbz*5ZWIxNmMyMWQ5NmQ*YWJlODYy/YzdlMmM4NmM4NzMwNCZvZj*w.gif" /><div style="width:300px; height:450px; overflow:hidden;"><center><div><embed src="http://www.soundclick.com/widgets/creatives/mp3PlayerPremium.swf" width="300" height="430" flashva开发者_JS百科rs="bandid=650303&ext=1" name="MP3PlayerPremium" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" /></div><div style="width: 300px; position: relative; top: -390px;"><a href="http://www.soundclick.com/bands/default.cfm?bandID=650303"><img src="http://www.soundclick.com/images/navigation/blank1x1.gif" border="0" width="300" height="250"></a> </div></center></div>

---

I've used the technique you've described many times and always felt a little guilty.

But I continually find that the easiest and most reliable way is to wrap my embeds (spawned from js, iframe, whatever the widget may use) in an div which I then constrain the width and height on. Finally using negative margins to pull the object up and out of sight.

#container {
   width:475px;
   height:65px;
   overflow:none;
}
#container embed {
   margin-top:-85px;
   margin-left:-145px;
}

I find it the easiest way to find tune where my object is, and its handy as sometimes widgets have fluid widths (100%) and pulling out the sides using negative margin left and right works quite well and you don't need to bother with positioning which can be finicky for some interface developers.

(I do this for the facebook likebox constantly - as you can see in the top right of earmilk.com)

---

Perhaps try:

#flash_object_container {
  position:relative;
}
#flash_object {
  position:absolute;
  bottom:0;
}

this will render the flash object from the bottom-up inside your container, combined with your overflow and explicit heights should fix it up.

Edit (as you've provided the code):

  <div style="width:300px; height:450px; overflow:hidden;">

could be changed to:

  <div style="width:300px; height:450px; overflow:hidden; **position:relative;**">

and then:

<div> <embed src="http://www.soundclick.com/widgets/creatives/mp3PlayerPremium.swf" width="300" height="430" flashvars="bandid=650303&ext=1" name="MP3PlayerPremium" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </div>

becomes:

<div **style="position:absolute; top:-YOUR_PX_VALUE;"**> <embed src="http://www.soundclick.com/widgets/creatives/mp3PlayerPremium.swf" width="300" height="430" flashvars="bandid=650303&ext=1" name="MP3PlayerPremium" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </div>

---

With the method you've tried, try positioning the flash object with a negative top number. ( top="-50px;" or whatever you need.