Vimeo Cuts into Rounded Corners of Parent

Question

I have a Flash movie playing inside a div element with rounded corners. The problem is that the Flash movie cuts into the corners of its parent. I could probably solve this by adding margins, but I don't really want to do that because then if the border-radius were to change, the margin would also need to be changed. I'd strongly prefer to not have that dependency and would rather be able to just clip the excess (i.e. hide the overflow, but overflow: hidden; doesn't work).

Here's a fiddle I put together to illustrate the problem - http://jsfiddle.net/donnapep/CWepw/1/

Thx.

Update: My apologies. I should have used the Vimeo player which is the one that doesn't work, even with the wmode parameter set to transparent. Here's the new fiddle - http://jsfiddle.net/donnapep/5ZRKP/7/

Answer 1

So it looks like rounded corners on both HTML5 video and on a Flash video work in Firefox, but do not work in Chrome. So, I'm just going to live with this for now until such time as Chrome adds support for border-radius to these elements.

Answer 2

Not the most elegant way to do it, but it seems works. I just layered the border on top and padded the parent so that the border cuts off the corners of the under lying flash. Tested in Chrome, Safari, and Firefox (all Mac).

Example: http://jsfiddle.net/BWcQ6/3/

HTML:

<div id="placeholder">
   <div id="rounded"></div>
   <object data="http://commondatastorage.googleapis.com/risemedialibrary-0afb2e81-b4a6-41f6-8f26-4eab430ddb3f/Car-speakers-590x90.swf" height="100%" width="100%"></object>
</div>

CSS:

#placeholder 
{
    width: 400px;
    height: 60px;
    border-radius: 15px;
    border: 10px solid #fff;
    position:relative;
    padding:5px;
}

#rounded
{
    width: 400px;
    height: 60px;
    border: 5px solid #000;
    border-radius: 15px;
    position:absolute;
    z-index:2;
    margin:-5px;
}