회원로그인 폼 회원가입 아이디찾기
SIR 디자인몰 바로가기 SIR 반응형웹 강좌 SIR 드로잉 강좌 SIR PHP 강좌

퍼블리셔 팁자료실

넌 이제 오빠꺼야, embed 동영상 위의 div 표시문제

  • 지운아빠
  • 작성일시
  • 조회 806
  • 댓글 8

본문

바쁜 분을 위한 Quick Tip.
embed 된 동영상 밑으로 <div>가 숨어 보이지 않을 때는
<embed> 태그에 wmode='Opaque' 를 추가해주자.
 
 
 
1. 이 팁을 쓰게 된 계기
 

수줍게 플래쉬 플레이어 뒤로 숨은 저 아이가 보이십니까?
 
쪽지보내기, 그래 쪽지는 받을께 그래야 너도 고백할 기회가 있을테니까 라고 말하는 듯한 수줍은 듯 도도한 저 자태,
 
하지만 집으로 편지 쓰는 건 안돼, 부모님이 아시면 혼나거든... 하는 새초롬함까지 모두 갖춘 모습...
 
코 앞에 있지만 닿을 수 없는, 가까이 하기엔 너무나 먼 당신 그 이름은 바로 사이드뷰였던 것입니다.
 
하지만 이렇게 수줍은 사이드뷰도, 한번 휘어잡으면 언제 그랬냐는 듯이 제쪽에서 먼저 달려드는 사태가 발생하니,
 
 
이런 부담스러운 사태는 피하고 싶다, 나의 짝사랑을 아름답게 간직하고 싶다 하시는 분은
 
이 팁을 건너띄세요. ㅋ 아 드럽게 길게 썼는데 재미는 없네 ㅠ
 
 
2. 자 각설하고 본론 들어갑니다.
 
익스에서 div 가 embed 된 동영상 밑으로 숨어버리는 현상이 있습니다. 모든 div 가 그런 건지, 동적으로 호출? 생성?되는 div 가 그런 건지는 테스트를 안해봐서, 이론이 딸려서 잘 모르겠습니다만, 우선 그누보드 사이드뷰는 동영상 밑으로 깔려버린다는 걸 첫번째 짤에서 확인했습니다.
 
해결방법은 <embed> 태그에 wmode='Opaque' 속성을 추가해주시면 됩니다.
(기억하기 편하게 오빠꺼 라고 읽으세요. 사이드뷰 넌 이제 오빠꺼야)
 
wmode 는 세가지 속성을 갖습니다.
 
1. Window : 기본값입니다. 모든 객체보다 상위에 위치하도록 합니다. 곰플레이어에 '항상 위' 기능 아시죠?
2. Opaque (오빠꺼) : 같은 위치에 HTML 요소가 있으면 요소보다 하위에 위치하도록 합니다.
3. Transparent : 오빠꺼랑 비슷하지만 투명도를 줄 수 있다는 점이 다릅니다. 테스트 안해봐서 뭔 소린지는 모르겠습니다. 동영상이 투명해지나보죠?
 
 
 
술이 덜 깼나봅니다.
  • 이 글을 내 페이스북 계정으로 보내기
  • 이 글을 내 트위터 계정으로 보내기
  • 이 글을 내 미투데이 계정으로 보내기
  • 이 글을 내 요즘 계정으로 보내기
  • 이 글을 내 구글플러스 계정으로 보내기
  • 좋아요 4
  • 싫어요 0

댓글보기

모노폴리 2012.09.20 11:19:03 112.♡.215.8

이팁으로 유추해 보자면 게시글 제목에 쓰인 비속어를 순화해 주시라고 쪽지를 보내려할때 발견된 버그로써 상대방이 어떻하면 기분이 나쁘지 않을까 고민고민하며 쪽지를 보낸게 느껴지는 게시글이군요.

또한 성과로 게시글 제목이 변경되고 팁도 발견되는 일석이조의 효과

로그인 하시면 댓글을 남길 수 있습니다.

퍼블리셔와 관련된 팁/자료실

퍼블리셔 팁자료실 내용 검색
TOTAL 723 글쓰기
퍼블리셔 팁자료실 목록
번호 제목 작성자 조회 좋아/싫어 날짜
723 기타 파이어폭스로 작업하는 분들에게 팁! 34 0 / 0 13.05.18
722 HTML 네이버 지도를 이용해 만든 레이아웃입니다. 댓글5 235 4 / 0 13.04.26
721 CSS IE7에서 float:right 버그에 관한 초간단 팁. 댓글6 410 2 / 0 13.03.28
720 웹접근성 웹 표준과 접근성, 그리고 크로스브라우징2 댓글4 507 1 / 0 13.03.11
719 웹접근성 웹 표준과 접근성, 그리고 크로스브라우징1 댓글1 308 0 / 0 13.03.11
718 CSS ios 에서 input 스타일 초기화 댓글3 334 2 / 0 13.02.27
717 기타 modern.ie 일종의 ie 테스터? 댓글2 296 1 / 0 13.02.15
716 CSS 웹표준코딩에 필요한 지식 참고하세요. 댓글2 468 0 / 0 13.02.14
715 기타 크로스브라우징? 이제 크롬에서 하나로 확인하자 댓글14 638 2 / 0 13.01.18
714 웹접근성 자바스크립트를 끈 로그인 폼 댓글15 542 10 / 0 13.01.16
713 기타 HTML5 기반 에니메이션 제작을 위한 Adobe Edge 댓글3 383 1 / 0 13.01.14
712 CSS IE6/7 img px 버그 260 2 / 0 13.01.10
711 CSS id나 class 명은 어떻게 쓰시는지요? 댓글6 445 1 / 1 12.12.31
710 반응형 참고해서 만들어 본 반응형 레이아웃 댓글3 575 5 / 0 12.12.27
709 CSS 팁은 아닌데 그냥 제가 자주쓰는 버튼 css 댓글4 672 2 / 0 12.12.20
708 웹접근성 html / css 버튼 만들어 주는 사이트. 자주 활용합니다^^; 편리성 댓글5 500 3 / 0 12.12.20
707 HTML IE6 PNG 초 간단하게 적용 댓글2 456 2 / 0 12.12.15
706 HTML HTML5 placeholder 사용하기 댓글1 520 0 / 0 12.12.15
705 CSS 제가 사용하는 CSS RESET (초기화) 댓글3 493 1 / 0 12.12.12
704 HTML <img> 태그 올 바르게 사용하기. 댓글5 449 2 / 0 12.12.11
703 CSS 모바일/테블릿의 @font-face 지원여부 댓글1 306 0 / 0 12.12.07
702 웹접근성 웹접근성이란? 댓글2 405 1 / 0 12.12.02
701 웹접근성 웹표준형 화면 확대/축소 댓글8 531 2 / 0 12.11.30
700 CSS 익스플로러에서 CSS3의 컬러속성을 필터로 사용하도록 변경해주는 사이트 318 0 / 0 12.11.28
699 웹접근성 접근성을 고려한, 컨텐츠를 가리는 방법 댓글3 479 3 / 0 12.11.25