크롬에서 유튜브 동영상 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>

이런 식으로 수정하면 크롬에서 정상적으로 동작하는 유튜브 동영상을 볼 수 있다.
이렇게…