유튜브의 세심함 2007/12/28 02:21
제 블로그 상단 메뉴에 마우스를 올려보시면, 풀다운 형태의 메뉴가 만들어져 있습니다.
저것은 CSS로만 만들어진 메뉴입니다. 테이블을 보였다가 감췄다 하는 정도에요^^;
제가 풀다운 메뉴를 사용하다보니, 한 가지 문제가 생겼는데요.
요즘은 플래시로 된 동영상 UCC를 많이 퍼다가 블로그로 올립니다.
아마도 저작권 등의 영향 때문에, 음악을 주로 그렇게 올리는 편인데요.
이 풀다운 메뉴가 플래시 아래로 숨어버리는 현상이 생기는 것이였죠~
바로 이 부분에서, 얼마전 눈치챈 유튜브의 섬세함을 보았습니다.
아래의 화면을 보시죠 :D
국내 동영상 UCC 서비스는 전부 확인 해보지는 않았지만,
제 블로그에 걸려있는 회사의 것들은 전부 저렇게, 메뉴가 플래시 아래로 깔려버립니다.
유튜브의 경우에는 메뉴가 플래시 위로 올라갑니다.
사실 이건 별달리 대단한 건 없습니다. 코드 한 줄만 넣어주면, 해결할 수 있는거거든요.
유튜브와 국내 서비스 하나의 '퍼가기 소스'를 비교해 보겠습니다.
국내 모 서비스의 '퍼가기 소스'
<object type='application/x-shockwave-flash' width='402px' height='324px' align='middle' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash
/swflash.cab#version=8,0,0,0'>
<param name='movie' value='http://flvs.daum.net/flvPlayer.swf?vid=xqVRBMhA4MU$' />
<param name='allowScriptAccess' value='always' />
<param name='allowFullScreen' value='true' />
<embed src='http://flvs.daum.net/flvPlayer.swf?vid=xqVRBMhA4MU$' width='402px' height='324px' allowScriptAccess='always' type='application/x-shockwave-flash' allowFullScreen='true'>
</embed>
</object>
/swflash.cab#version=8,0,0,0'>
<param name='movie' value='http://flvs.daum.net/flvPlayer.swf?vid=xqVRBMhA4MU$' />
<param name='allowScriptAccess' value='always' />
<param name='allowFullScreen' value='true' />
<embed src='http://flvs.daum.net/flvPlayer.swf?vid=xqVRBMhA4MU$' width='402px' height='324px' allowScriptAccess='always' type='application/x-shockwave-flash' allowFullScreen='true'>
</embed>
</object>
유튜브의 '퍼가기 소스'
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/_g767gS6DCE&rel=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/_g767gS6DCE&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/_g767gS6DCE&rel=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/_g767gS6DCE&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>
저를 만족시킨 유튜브의 섬세함은 바로 위의 굵은 줄 한 줄 덕분입니다.
그래서 유튜브를 자주 사용하게 됩니다.
국내 동영상 UCC 서비스들을 블로그로 가져 오려면 일일이 wmode를 넣어줘야 하기때문에 여간 불편한 것이 아닙니다. 이런 경우까지 대비해서 저런 센스있는 코드를 넣어놓은 유튜브 멋쟁이죠?^^
통상, div 나 table 같은 블록라인 태그가 플래시와 겹치게 되면, 플래시가 이들을 잡아먹고 '무조건 위로 튀어나오는 현상'이 있습니다.
이를 방지하기 위해서 불러온 플래시의 wmode 속성에 transparent 를 주면 됩니다.
원래 이 옵션은 플래시에서 사용하지 않는 빈 부분을 투명하게 처리하기 위해서 사용하는데요.
버그인지 뭔지 저 옵션을 주게 되면, 플래시가 블록라인 태그위로 치고 올라오지 않고, 밑으로 깔리게 되더라구요.
위의 예처럼 object 태그를 이용해서 플래시를 삽입할 때는 param 태그를 이용해서 속성을 추가 해주면 됩니다.
<param name="wmode" value="transparent"></param>
만약 object 태그를 사용하지 않고, embed 태그만으로 플래시를 사용하실때는 아래처럼 embed 태그 뒤에 확장태그로 wmode 속성을 설정해주시면 됩니다.
<embed src="어쩌고.swf" wmode="transparent" .... ></embed>
우리 나라 서비스들도 요런 아주 사소한 거 까지 신경써줄 수 있었으면 좋겠습니당 ^_^)/
wmode 처리가 안 된, 국내 서비스가 쏭군 블로그 메뉴를 잡아먹는 현장 목격하러 가기
wmode 처리가 잘 된, 친절한 유튜브씨가 쏭군 블로그 메뉴는 안 잡아먹는 현장 목격하러 가기
PS
올블로그를 통해 오셔서 제 블로그 상단의 메뉴를 이용하시면 메뉴가 오작동 되는 버그가 있습니다.
올블로그 툴바를 끄셔야, 제 블로그 상단의 메뉴가 오작동 없이 제대로 작동합니다.
왜 그런지 이유는 밝혀지지 않았습니다. 묻지마 버그입니다...^^;;;
PS 2
위에 언급된 mncast 는 과거에 올린 동영상으로 현재 mncast는 wmode, transparent 코드가 추가되어 있습니다.. 만쉐!!!
구매처 : 
그런데 wmode, transparent가 들어가 있어도 우분투에서는 레이어가 플래시 밑으로 숨어버리더라구요..... 리눅스용 플래시 플래이어 버그도 많고 퍼포먼스도 나쁘고...맘에 안드는..;;;
아 우분트는 써보질 못했는데,
우분투에서는 그럼 문제가 있었군요^^
리눅스용 프로그램들 윈도우용 처럼 세심하게 신경써서 나왔으면 좋겠어요~~^^
이야~ 전부터 궁금했던 올블과 정체불명의(?) 버그의 정체(?)를 드디어 밝혀냈습니다! 역시 정의는 승리하는 법이군요. -_-;;
그런데 이걸 공짜로 알려드려야 할지... -ㅅ-;
오우?
정체불명의 버그요?
무지 궁금합니다....
비밀글이나 제 메일로 알려주세용!
junjin21@gmail.com
사례는 뽀뽀 100번!!
유튜브의 세심함 보다는 히로스에 료코에 눈이가는건 왜일까요 ㅋ
시루스님 료코 팬이셨죠? ㅋ
새해 복 많이 받으세요
준비하는 건 잘 되시나용^^
퍼온 동영상이 저런 문제를 일으킬 때 왜 그런지 궁금했었는데 해결되었네요.
도움 되었다니.. 다행입니다..^^ 좋은 하루 되세요^^
wmode가 transparent 또는 opaque로 되어 있을 경우 플래시 플레이어 9.0.47.0 이하에서는 전체화면 모드가 동작하지 않습니다.
소스 코드를 보시면 아시겠지만, 엠엔케스트는 전체화면 기능이 있지만,
<param name='allowFullScreen' value='true' />
유투브의 퍼간 동영상에는 전체화면 기능이 없습니다.
물론 최신 플래시 플레이어에서는 wmode가 transparent, opaque로 되어 있더라도 전체화면이 동작합니다.
이건 하위 호환성을 위해서 저 코드를 넣지 않았나 하고 생각합니다.
물론 사용자 입장에서는 불편할 수 있지만, 서비스하는 곳에서는 어쩔 수 없는 선택이였겠죠.
다만 센스의 문제는 아닙니다.
여담이지만 wmode가 transparent로 설정되어 있으면 window 모드 보다 시스템 부하가 더 올라갑니다.
김홍기님 안녕하세요^^!!!!
제가 '센스'라는 표현을 사용해서 기분 상하셨다면 죄송합니다^^;
하지만, 블로그 같은 곳에 퍼오는 동영상 UCC의 경우 반드시 생각해 봐야 할 문제라고 생각합니다.
전체화면을 지원할 것인가.
wmode 옵션을 사용할 수 있도록 지원할 것인가.
저라면,
후자를 택한 유튜브쪽이 조금 나은 선택을 했다고 보입니다^^;;
블로그 같은곳에 올린 자료를 전체화면으로 보는 사람이 그렇게 많지는 않다고 생각되거든요. 반면 플래시와 블록라인 태그가 겹치는 곳은 종종 본 것 같습니다.
만약 제 생각과 다르게 퍼 온 동영상을 전체화면을 이용하는 유저가 상당수 있다고 하더라도 ,유튜브처럼 직접 자사사이트로 트래픽을 유도하여 거기에서 전체화면을 보여줘도 나쁠것이 없다고 생각됩니다^^
전체화면은 그렇게라도 보여줄 수 있지만,
태그와 겹쳐서 블로그나 웹사이트에서 서비스에 지장을 초래한다면 그걸 구제할 방법이 없으니 말이에요 ㅠㅠ
그리고 시스템 부하문제는 그렇게 크게 작용하지는 않는 것 같습니다. 어차피 다른 작업을 해야한다면 동영상을 끌테니 말이죠^^ㅋ
그리고 레이어 수백개가 겹쳐져서 만들어진 모션그래픽이 아닌이상 현재 유저들이 사용하고 있는 환경에서 wmode로 인한 시스템 문제는 기우에 지나지 않을까 생각됩니다.
좋은 하루 되세요~~