Issue with CSS scale + position absolute

Question

I have a YouTube iframe with a div as a sibling.

I started from this and all works great. (the title is visible and the video is clickable).

The problems started when I had to add a css scale transform on the stripWrapper div: example.

As you can see this caused my title to hidden behind the YouTube video. In order to fix this I added a position: absolute; on the wrapper div, which caused the title to be visible, but now the video is not clickable.

When I reduce the z-index of the stripWrapper the video is clickable but the title is not visible: example

Comments: 1. The 80% width is only because I want JSBin's "edit" button to be visible.
2. "stripWrapper" must be 100% height

Last test's code:

HTML

<div class="wrapper">
    <div class="stripWrapper">
        <div class="strip">I am a title</div>
    </div>

    <iframe width="80%" height="100%" class="myIframe" src="http://www.youtube.com/embed/JTMf40ORFE8?playsinline=1&amp;controls=0" frameborder="0" allowfullscreen=""></iframe>

</div>

CSS

.stripWrapper{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    z-index: 10;
    -webkit-transform: scale(1.05);
}

.strip{
    position: absolute;
    top: 20px;
    left: 10px;
    width: 80%;
    background-color: green;
    z-index: 12;
    text-align: center;
    font-size: 18px;
    color: white;
}

.myIframe{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    width: 80%;
    height: 100%;
    border: 1px solid blue;
    z-index: 11;
}

edit: All tests:

1. test1 (everything is working, no scale)

2. test2 (added scale - div is hidden)

3. test3 (added position absolute - video not clickable)

4. test4 (changed z-index - div hidden again)

Answer 1

Check it out just need to make sure you are scaling the iframe and make sure the container has position:relative;

http://jsbin.com/wiluyiwire