유튜브 동영상 z-index 값 조정하기

유투브 동영상을 홈페이지에 삽입할때 메뉴나 다른 요소들 위로 동영상이 가려지는 경우가 발생한다.

유튜브 동영상에 대해 파이어폭스나 심지어는 IE에서도 발생하지 않는 z-index 문제이다.

중첩된 객체들에게 z-index를 부여해도 유튜브 동영상을 iFrame으로 포함한 경우 이상하게 표시된다.

이 문제는 유튜브 동영상을 삽입할 때 wmode=opaque 속성을  지정하면 해결할 수 있다.

즉, 아래와 같이 삽입된 경우

<iframe src="http://www.youtube.com/embed/N8zO5lP58i4" frameborder="0" allowfullscreen="" width="480" height="360"></iframe>

아래와 같이 수정하면 된다.

 

<iframe src="http://www.youtube.com/embed/N8zO5lP58i4?wmode=opaque" frameborder="0" allowfullscreen="" width="480" height="360"></iframe>

단, 이미 속성이 지정된 경우는 wmode 앞에 ?가 아니라 &를 붙여야 한다.

즉, 원래 삽입된 코드가 아래와 같은 경우는

<iframe src="http://www.youtube.com/embed/N8zO5lP58i4?rel=0" frameborder="0" allowfullscreen="" width="480" height="360"></iframe>

아래와 같이 수정하면 된다.

 

<iframe src="http://www.youtube.com/embed/N8zO5lP58i4?rel=0&wmode=opaque" frameborder="0" allowfullscreen="" width="480" height="360"></iframe>

<iframe width="960" height="600" src="https://www.youtube.com/embed/MkyFbcnIQV4?rel=0&wmode=opaque" frameborder="0" allowfullscreen></iframe>

&wmode=opaque 

Flash Movie는 기본적으로는 z-index와 관계없이 화면의 맨 앞에 보이게 된다. wmode 값을 설정하여 플래시 플레이어를 제어 하여 배경을 투명하게 하거나 위에 레이어를 올릴 수 있다. 

window : Flash Movie 를 맨 위에 놓게 된다. (기본값) 

opaque : Movie 아래의 모든 것을 가리게 된다. 위에 레이어를 올릴 수 있다. 

transparent : Movie를 투명하게 하여 뒤의 html 부분을 보여준다. 

transparent모드를 사용할 경우 animation performance를 떨어뜨리게 되기 때문에 반드시 필요한 경우에만 사용해야 한다. 면적이 넓으면 피하는 것이 좋다.