유튜브(youtube) 동영상 레이어 겹칠때 뚤리는 현상 해결방법 or z-index 문제

 유튜브 동영상을 화면에 넣을때 레이어가 그 위로 올라가는경우 아래 화면 처럼 보여야 하는대

 

 

이렇게 레이어가 뚫려서 보이는경우가 있습니다.

 

동영상을 넣을때 iframe 형식으로 넣는대

<iframe width="255" height="191" src="//www.youtube.com/embed/fMbmWEsAMjo?rel=0" frameborder="0" allowfullscreen></iframe>

이렇게 넣는 부분에서 &wmode=opaque 를 추가해주면 이런 현상을 막을수 있습니다.

<iframe width="255" height="191" src="//www.youtube.com/embed/fMbmWEsAMjo?rel=0&wmode=opaque" frameborder="0" allowfullscreen></iframe>

 

또는

<iframe width="255" height="191" src="//www.youtube.com/embed/fMbmWEsAMjo?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

 

ie11 에서는 이 방법으로 해결되었다.