화면 비율에 따라 유동적인 동영상 제작(iframe호출방식)

화면 비율에 따라 유동적인 동영상 제작(iframe호출방식) 

 

  ​Intro   

 안녕하세요 웹표준개발 4팀 황혜경입니다.

모바일에 동영상 삽입시 발생한 이슈와 대응 방법에 대하여 공유하겠습니다.

 

  ​기획 디자인 화면 설계  

111.gif

위 이미지처럼 기획의도는 모바일 기기별 동영상이 비율에 맞게 유동적으로 반영되길 원했습니다.

code.jpg 

왜 html5임에도 video 요소를 사용하지 않을까요?

동영상 재생 코덱 라이센스 문제로 각 브라우저 마다 지원하는 파일 포멧이 다르고, 

동영상 스트리밍 서버 비용도 발생합니다.

그 점을 해결 할 수 있는 방안으로 YouTube나 vimeo등 외부서비스에 등록된 동영상 소스를 

iframe으로 불러 오는 방식을 사용하는 것 입니다.

  ​이슈  ​​

 1.jpg

img 요소 처럼 width와 height 속성값을 100%적용하였습니다.

문제는 iframe 요소는 불러오는 컨텐츠 높이값 만큼 노출된다는 점입니다.

320px보다 큰 화면일 경우 iframe 높이값이 동영상의 높이값으로만 노출됩니다.

[테스트 링크]  iframe width:100% height:100% 

 issue.jpg

또한, 모바일 기기별 노출되는 영역은 버젼별로 상이하였습니다.

안드로이드 버전에서 높이값을 기준으로 동영상을 확대 노출하는 기기들도 있었습니다.

iframe의 width와 height값은 100%로 할 경우 기기별 대응이 어렵습니다.

2.jpg

iframe의 width와 height값을 미선언시 동영상 불러오는 사이즈인 너비 300px, 높이 150px로 노출됩니다. 

issue2.jpg

문제는 레이아웃  padding:20px로 선언되어있어 320px 최소사이즈 기기에서 불러 올 경우,

레이아웃을 벗어나는 현상이 발생됩니다.

너비는 기기별 화면 대응이 필요하며, 높이값이 비율에 맞춰 자동으로 전환될수있는 css 속성이 필요한 상황입니다.

  ​해결   

부모 div 에 padding-top 값 선언. iframe을 absolute 화 한다. 

padding-top 은 자신의 너비에 비율을 높이값으로 계산합니다.

width:100%에 padding-top:100%속성은 정사이즈,

width:100%에 padding-top:50%속성은 너비의 반값을 높이값으로 계산 해 주는 것 입니다.

iframe에 너비와 높이값을 100%로 지정 후 부모 div 에 padding-top을 비율에 맞게 적용해주면 

자동으로 화면 비율에 맞게 대응이 가능합니다.

[테스트 링크]  iframe padding-top

code2.jpg

동영상 16:9 비율을 계산하였을때 100%기준으로 높이값 56.6%을 적용합니다.

 code3.jpg

부모div에 position:relatvie를 적용하여 iframe 이 부모 div 너비, 높이값을 상속받을 수 있도록 합니다. 

더 좋은 방식으로 iframe 이슈를 해결하셨다면 공유부탁드립니다~^^

TIP

동영상은 왜 16:9 비율로 계산했을까요?

YouTube 기준으로 설명하면, 기존에는 4:3 비율로 노출하였으나 와일드 화면 기기들이 출시되면서 16:9 비율로 지원하게 되었습니다.

자세한 내용은 아래 경로 확인해주세요. 

[참고]16:9 비율 해상도 목록이 정리된 블로그

[참고]4:3 비율 해상도를 16:9로 변경하는 블로그 

[참고] 동영상생성 사이트 

Comments are closed.

Post Navigation