웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
만약 자신의 웹사이트에 유튜브 영상의 코드를 추가하여 보여주려고 한다면 해당 동영상 코드를 iframe 태그에 사용하는 것이 일반적입니다.
그런데 만약 태그를 넣었음에도 정상 동작하지 않는 문제가 나타날 경우가 있는데요 나타나는 증상은 아래와 같습니다.
! Youtube 영상 태그를 추가할 경우 발생 이슈
iframe 태그와 다른 태그가 겹치는 부분에 있어 z-index의 css 속성이 적용되어 있음에도 z-index 값과 상관없이 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를 추가하는 방법으로 해결이 가능하다. 즉 자동으로 코드가 추가되도록 자바스크립트를 추가한다.# 자동으로 속성을 추가하는 스크립트 소스
iframe 태그에 있는 경우 자동으로 이슈를 해결할 수 있도록 스크립트를 작성하였습니다. 페이지에 존재하는 iframe 태그 요소를 찾아 그 안에 있는 src의 주소 뒤에 wmode를 자동으로 추가하는 스크립트입니다.$('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"
});
}
});
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"
});
}
});
순서대로 나타내면...
- 페이지 안의 모든 iframe 요소를 찾기
- src 속성값이 존재하는지 확인
- 있는 경우에 wmode=transparent를 뒤에 추가
여기까지 IE에서 콘텐츠를 가리던 이슈를 해결하는 방법을 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
