Embaded vid doesnt inherit opacity and/or z-index

[RainSong]

Helo, first off all I’d like to say that I love this site :) I’m new to CSS and my ‘skills’ are very very basic but I’ve found many great demos here that are very motivating. Latelly I’ve been trying out what was presented [here](https://css-tricks.com/functional-css-tabs-revisited/) and I’ve run across a problem that I can’t get through.

Here’s my butchering of the code:

HTML:

Embaded vid

Text

test

Pick

CSS:

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);

}

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.

Oh almost forgot, the problem occures only in Firefox, in Chome everything is perfect, in IE? I dont know and I dont care ;]

Could someone please explain what to do to make it work in Firefox or get around it?

[dfogge]

please make a codepen: https://css-tricks.com/how-to-ask-a-good-question-in-the-forums/

[chrisburton]

You need to set a position on `[type=radio]:checked ~ label` and `[type=radio]:checked ~ label ~ .content`

But as @dfogge suggested, please make a CodePen (http://codepen.io) so we can better help you.

[RainSong]

Sorry for not providing enough info in opening post, I’ve missed the topic dfogge mentioned. I’ve edited it so it is a little bit easier to read through it now.

As for codepen, it’s [here](http://codepen.io/RainSong/pen/jKLzw “”)

It has the same problem firefox has that I described in opening post.

If anyone have solution to this problem, please type exact lines of code that are missing – like I said, my ‘skills’ are very very basic so only descrybing the solution to me can not solve the problem for me xd

[Paulie_D]

Am I missing something?

You haven’t implemented half of the mark-up from the linked article. I’m not seeing any tabs etc.

[RainSong]

The tabs in ‘my code’ are the lables to the left of the content (the ‘Embaded vid’, ‘Text’ and ‘Pick’) and they work just fine. The only thing that I have a problem with is the iframe that after clicking on the ‘Text’ or ‘Pick’ lable doesn’t get the lower opacity and z-index (it doesn’t ‘disapear’ it just moves to the right).

As for the actual orginal corde that I’ve copied I think I’ve missinformed you – the orginal code was not writen by mr. Chris Coyier in the [Functional CSS Tabs Revisited](https://css-tricks.com/functional-css-tabs-revisited/ “”) article but by mr. Jacob Dubail which mr. Chris Coyier mentions at the bottom of mentioned article and can be found [here](http://jsfiddle.net/jacobdubail/bKaxg/7/ “”). Both codes look almost identical for my newbie eye that’s why I’ve miss linked you in the opeaning post wchich I am very sorry for.

[Paulie_D]

I’ve tweaked it a little but I’m not sure I understand exactly what the problem is.

http://codepen.io/Paulie-D/pen/kLHAe

The positioning could use adjusting but that’s another matter.

[RainSong]

Yeah the positioning sucked I know but thats ‘not the problem’.

As for the ‘real problem’ – the problem is the embaded vid that stays visable after clicking on text and pick lables – it should become ‘invisible’ so it wouldn’t cover up the rest of the content on those lables.

English isn’t my first language but I think it’s preaty self explanatory.

When I click on the ‘Text’ lable all I want to see is the content of div that is in our case ‘Pellentesque habitant morbi ….’ , and all I want to see after clicking on Picture label is the div containing the picture.

And everything would work perfectly if we wouldnt embade vid into the content div. The moment we do that, it coveres up eveything, it doesn’t react to changing of the lables, it always has the highest z-index and full opacity.

So what I’m asking for is line(s) of code that will make the embaded vid ‘disapear’ after clicking on any of the lables that aren’t ‘related’ to it, in our case, the moment I click on tab-2 or tab-3 I want embaded vid to disapear.

PS. what’s interesting, when I wrote opeaning post few days ago, eveything worked perfectly like I wanted in Google Chrome, but now it doesn’t, even in files that I didn’t modyfy in any way in the past few wdays. So now the problem refers to not only Firefox but also Chrome ;(/

[Paulie_D]

That’s odd….it was working before.

[Paulie_D]

Hmmm….looks like you can’t set an opacity to an iframe.

Here’s an updated Codepen….I think it could be improved however.

http://codepen.io/Paulie-D/pen/kLHAe

[RainSong]

Eveything works perfec now :)

Thank you very much Paulie_D for your time and help :)

Btw. I dont need any more help with it but I’m just courious, how would you improve it more?

[Paulie_D]

I’m not the best styling guy and that’s probably what it needs more than anything else.

[Author]

Posts