HTML5 동영상 삽입, 한 화면에서 특정 크기( ex. width: 600, height: 600 )를 가진 영역에 각각 크기가 다른 동영상을 임의 위치에 삽입할 수 있나요?


안녕하세요. 프로그래밍 언어 경험이 있는 개발자입니다.

웹사이트 공부를 하고 있는데, 매우 초보라 간단한 질문이 잦네요. ;

HTML5 map 태그를 사용하면 원하는 위치를 지정하여 링크를 할 수 있는 것처럼,

원하는 위치에 동영상을 위치 시키고 싶습니다.

예시

위 그림과 같이...

html5 태그 사용, css, jquery 등 어떤 방법이 있을까요?

  • 2016년 03월 26일에 작성됨
    웹 사이트 공부 중입니다. 많은 도움 주시면 좋아요.

조회수 285


1 답변


좋아요
4
싫어요
채택취소하기

저라면은, 순수하게 css 로 할 것 같아요.

wrapper div를 주고, position:relative; 속성으로 그 하위 div를 만들고, 거기에 동영상 플레이 elements 를 만들어서 wrapper div 의 하위 div 에 position:absolute; 를 통해서 포지션을 주겠습니다.

예제)

<div id="wrapper">                       // <-  position:relative;
  <div id="firstVideo"></div>       //   <-  position:absolute;
  <div id="secondVideo"></div> //  <-  position:absolute;
  <div id="lastVideo"></div>       //  <-  position:absolute;
</div>

position:absolute; 가 내키지 않는 방법이긴 하지만, 특정 위치에 보여주기 위해서 "쉬운" 방법은 이렇습니다~

하지만, responsive 웹에서는 깨질 수 있으니 주의 해야할 것 입니다.

아래, 제가 예제로 youtube링크를 iframe 으로 넣어 봤습니다. html5 에서 지원하는 <video> element 일지라도, 이것을 감싸고 있는 div 에 포지션을 주기 때문에, 문제 없을거라 생각 됩니다.

https://jsfiddle.net/arclien/z19y3Lkz/

  • 2016년 06월 01일에 수정됨
  • 2016년 03월 26일에 작성됨

  • Arclien님이 답해주신것처럼 position: absolute가 올바른 방법 맞구요 video도 문제없이 되네요. https://jsfiddle.net/s1u4cj4e/1/    Jason Hyunjoon Park   2016.3.26 22:54     
  • 정확히 답변해주셨습니다. 반응형에 대한 것은 좀 더 깊이 생각해봐야겠네요. 많은 도움 되어 주셔서 감사합니다.     상남자   2016.3.26 23:00     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close