만약 자신의 웹사이트에 유투브 영상의 코드를 추가하여 보여주려고한다면? 이 경우 해당하는 동영상 코드를 iframe 태그를 사용하여 넣을 것이다. 그런데 이 태그를 넣었을때 정상적으로 동작한다면 Okay!이지만 정상 동작하지 않는 문제가 나타날 경우가 있다. 나타나는 증상은 아래와 같이 발견할 수 있다.


! Youtube 영상 추가시 발생하는 이슈

iframe 태그와 다른 태그가 겹치는 부분에 있어 z-index의 css 속성이 적상적으로 적용이 되었음에도 iframe태그가 우선되어 무조건 상위에 표시되어 나타나는 문제

이와 같은 현상은 익스플로러(Internet Explorer, IE)에서 발견되며 다른 브라우저는 이런 현상이 나타나지 않을 수 있다. 이 경우 해결하기 위해서는 어떻게 해야할까?



! 유투브 영상에서 z-index 문제가 나타나는 경우 해결방법

일단 이 현상은 왜 나타날까? 그 이유는 유투브(youtube) 동영상 콘텐츠를 페이지에 넣을때 iframe내의 영상 콘텐츠가 무조건 위로 나오도록 기본값으로 설정되어 있기 때문이다. 이는 다행히 변경이 가능하며 이를 위해서는 해당 영상의 url 파라미터로 wmode=transparent값을 추가하면 된다. 이 코드를 url 주소 뒤에 넣어주기만 하면 된다.

<iframe width="560" height="315" src="testVideo" frameborder="0" allowfullscreen></iframe>

아래와 같이 변경한다.

<iframe width="560" height="315" src="testVideo&wmode=transparent" frameborder="0" allowfullscreen></iframe>

이처럼 코드를 변경하는 것 만으로 이제 IE에 동영상이 무조건 위로 나와 다른 콘텐츠를 가리던 문제가 해결된다.


! cms 또는 자동으로 영상이 추가되는 경우는?

유투브 영상 콘텐츠가 데이터베이스에 저장되어 호출될 때마다 자동으로 콘텐츠를 구성한는 경우... 이 경우 어떻게 해야할까? 이런 경우 자바스크립트를 사용해 검색된 유투브 영상 소스에 모두 wmode=transparent를 추가하는 방법으로 해결이 가능하다. 즉 자동으로 코드가 추가되도록 자바스크립트를 추가한다.


# 자동으로 속성을 추가하는 스크립트 소스
<script type="text/javascript">
$('iframe').each(function() {
 var url = $(this).attr("src");
 if ($(this).attr("src").indexOf("?") > 0) {
    $(this).attr({
"src" : url + "&wmode=transparent",
"wmode" : "Opaque"
});
 }
 else {
    $(this).attr({
"src" : url + "?wmode=transparent",
"wmode" : "Opaque"
});
}
});
</script>

위 스크립트는 페이지안의 모든 iframe 태그를 찾고 그 안에 있는 src의 파라미터에 해당하는 속성 wmode를 추가하게된다. 그러므로 몇 개의 동영상이 존재하든 이슈를 모두 해결할 수 있다. 순서대로 나타내면...
  • 페이지 안의 모든 iframe 요소를 찾기
  • src 속성값이 존재하는지 확인
  • 있는 경우에 wmode=transparent를 뒤에 추가

IE에서 콘텐츠를 가리던 이슈는 깨끗히 해결된다.