Latelly I've been trying out what was presented here:
http://css-tricks.com/functional-css-tabs-revisited
and I've run across a problem that I can't get through.

When I put text or picture into .content it'disaper' like it should after clicking on the tabs but when I embade a vid from youtube and try to switch the tab the embaded vid only move but dosn't seem to change z-index or opacity.

The problem occures only in Firefox, in Chome everything is perfect, in IE? I dont know and I dont care ;]

Here's my butchering of the code:

HTML:

Code:
<body>
  <img src="./bg.jpg" class="bg" />
  <div class="container">
    <div class="slideshow">
      <div class="slide">
        <input type="radio" id="tab-1" name="tab-group-1" checked>
        <label for="tab-1">Embaded vid</label> 
        <div class="content">
          <iframe width="560" height="315" src="http://www.youtube.com/embed/316AzLYfAzw" frameborder="0" allowfullscreen></iframe>
        </div> 
      </div>
      <div class="slide">
        <input type="radio" id="tab-2" name="tab-group-1">
        <label for="tab-2">Text</label>
        <div class="content">
          <p>test</p>
        </div> 
      </div>
      <div class="slide">
        <input type="radio" id="tab-3" name="tab-group-1">
        <label for="tab-3">Pick</label>
        <div class="content">                
          <img src="./vs.png">
        </div> 
      </div>
    </div>
  </div>
</body>
CSS:

Code:
img.bg { 
min-height: 100%; 
min-width: 1024px; 
width: 100%; 
height: auto; 
position: 
fixed; 
top: 0; 
left: 0; 
}

.container { 
position: absolute; 
width: 1000px; 
margin: 150px 0 0 350px; 
padding: 20px; 
min-height: 220px; 
clear: both; 
}

.slideshow { 
position: relative;
min-height: 350px; 
clear: both; 
margin: 15px 0 25px; 
}

.slide { 
float: left; 
}

.slide label { 
font-family: Helvetica, Verdana; 
font-size: 16px; 
color: #A0A0A0; 
text-shadow: 0px 0px 3px #333; 
font-weight: bold; 
margin-right: 1000px; 
line-height: 250%; 
position: relative; 
left: -100px; 
top: 25px; 
z-index: 1000; 
-webkit-transition: background-color .17s linear; 
-moz-transition: background-color .17s linear; 
transition: background-color .17s linear;
} 

.slide [type=radio] { 
display: none;
}

.content { 
position: absolute; 
top: -1px; 
left: 40px; 
color: #A0A0A0; 
width: 600px; 
padding: 20px 20px 20px 20px; 
margin-left: 30px; 
opacity: 0; height: 100%; 
-webkit-transition: all 1s linear; 
-moz-transition: all 1s linear; 
transition: all 1s linear; 
box-shadow: 0 0 20px black; 
font-family: Verdana, Geneva, sans-serif; 
}

[type=radio]:checked ~ label {

border-bottom: 1px solid white; 
z-index: 2; 
}

[type=radio]:checked ~ label ~ .content { 
z-index: 1; 
opacity: 1; 
left: 0; 
background: rgba(0,0,0, .6); 
}
Could someone please explain what to do to make it work in Firefox or get around it?