[jQuery/JavaScript] 모바일 퍼블리싱 - CSS, 동영상 비율 계산

이젠 모바일 웹앱은 필수가 되면서 반응형은 필요요소가 되었습니다.

적응형으로 모바일 디자인을 따로 만든다고해도, 모바일 디스플레이가 워낙 크기가 다양해서 어쨌든 준(?) 반응형으로 만들어야 합니다.

적응형은 미디어쿼리를 쓰지 않을 뿐이지 각종 디스플레이 크기에 반응해야하기 때문에 고정값으로 가로세로 크기를 지정하면 안되니까요~

적응형이라고 꼭 미디어쿼리를 쓰지 않는다는 것은 또 아니고, 결국 적응형도 반응형이나 다름 없다는 것이죠.

반응형은 반응하는 기기의 범위가 데스크탑 까지 가있는 것입니다.

뭔가 시작부터 되게 헷갈리게 만드는 말들을 주저리 주저리 했네요..

아무튼 그래서 이번 포스팅에서는 반응형으로 동영상쪽 퍼블리싱+JavaScript 하실 때 참고하시라고 제가 작업했던 내용을 공유드리려고 합니다.

위 사진과 같은 동영상 레이아웃을 화면 비율에 맞춰서 짜는 방법입니다!

저희는 동영상을 유튜브 API에 연동할 거라서 유튜브의 동영상 화면 비율 (권장 해상도) 도움말을 참고하였습니다.

https://support.google.com/youtube/answer/6375112?hl=ko (유튜브에서 말하는 동영상 재생 권장 해상도)

저희 동영상 재생 비율은 16:9로, 아예 화면에 꽉 차는 것으로 진행하기로 하였습니다.

아마 이 해상도가 가장 적절할거예요. 보통 유튜브나 페이스북에서 보는 동영상 크기 비율이 이정도 일거라고 생각이 듭니다.

그럼 이제 비율을 정했으니 퍼블리싱 해볼까요? 

먼저, HTML 코드 입니다.

<div class="vd" id="vd_box">
    <img src="http://1.bp.blogspot.com/-An_udc2Ofig/VkIa7LFATeI/AAAAAAAAImc/LezAoNQ48XE/s1600/girl%2527s%2Bgeneration%2BBabyG%2B2015%2BFW%2BFasion%2BPhoto%2B%25284%2529.jpg" class="vd_preview" />
    <img src="../images/videoshop/play_icon.png" class="play" id="play_icon" />
</div>

vd는 video의 약자로 쓴거구요, 

첫번째 <img/>는 유튜브에서 가져와질 썸네일 Preview 이미지 입니다.

두번째 <img/>는 가운데 있는 동영상 재생 아이콘 이미지 입니다.

HTML은 여기까지가 끝!

그리고 CSS 코드 입니다.

.vd {
  position: relative;
  img.vd_preview { width: 100%; height: 100%; }
  img.play { width: 50px; height: auto; position: absolute; top: 0; left: 0; opacity: 0.7; }
}

Preview 이미지는 화면에 맞춰야 하므로 일단 크기를 100%로 주구요,

play 아이콘 이미지는 동영상에 가운데에 떠야하는데, 일단 absolute로 top 0 left 0 으로 초기화 합니다.

이제 화면에 보여지는 퍼블리싱은 끝났습니다.

기본 준비가 마쳐졌으니 이제 자바스크립트로 화면에 따라 Preview 이미지(vd_preview) 세로크기와 플레이 아이콘 이미지의 위치만 조정하면 될 듯하네요 ㅎㅎ

<script>
    jQuery(document).ready(function(){
        //동영상 비율 관련
        var windowWidth = $( window ).width();
        var widthRatio = 16;
        var heightRatio = 9;
        var vdHeight = parseInt(( windowWidth / widthRatio ) * heightRatio);
        var vdBox = jQuery("#vd_box");
        var playIcon = jQuery("#play_icon");
        vdBox.css("height", vdHeight);
        playIcon.css({"top" : vdHeight/2-20, "left" : windowWidth/2-40});
    })();
</script>

하나하나 차근차근 설명드리면 

jquery.ready, 즉 DOM이 준비가 끝나면 (HTML이 모두 랜더링이 되었다면)

windowWidth 변수는 현재 창의 가로크기를 가집니다.

widthRatio와 heightRatio는 가로/세로 비율의 크기를 가집니다.

vdHeight 는 비디오 프리뷰이미지의 세로크기로서 ( (창의 가로크기 / 가로 비율) * 세로 비율 ) 로 구합니다.

vdBox와 playIcon은 html 코드에서 보셨듯이 비디오가 들어간 div와 플레이 아이콘 이미지가 들어간 div 입니다.

위와 같은 변수들을 모두 구한 후, jQuery의 css 메서드로 CSS를 수정하면 됩니다.

vdHeight를 vdBox의 세로 크기로 지정하고, playIcon의 위치를 적당히 수정해주면 끝!

여기 까지 하게되면 어떤 모바일 기기로 접속했다고 해도, 그 기기의 디스플레이크기에 따라 16:9 비율을 구하여 화면에 이미지가 뜨기 때문에 실제 유튜브 API를 연동해도 상사가 다시 해달라고 요청하는 귀찮은 문제가 없을 것입니다.

모두 화이팅 입니다!

도움이 되셨다면 아래 공감버튼을 꾸욱!!

▼▼▼▼▼▼