[활용팁] video동영상 모바일에서 화면 크게 보기

우선..제가 적는것은 jwplayer가 아니고 비디오태그를 쓰시는분들께 한정되는글이에요

나리야? 나리야도 뭐 비슷하겠죠? 안봐서 모르겠지만..

일딴 진짜 별것도 아니고..제대로 한건지도 잘 모르지만..검토도 받을겸..

일딴 적어봅니다.

스트리밍 이런것 말고...그냥 일반 아무나 올린 유머영상 같은걸 

pc로 볼때 제로보드나 그누보드의 다른회사들꺼 쓰시는 분들꺼도 많이 보고 여러번 테스트도 해봤는데...

그냥 아미나 css가 가장 나은거 같아요

pc에서 ...화면이 세로로 길게 나온다고 하더라도 이걸 세로길이에 맞춰서 빼버리면..화면이 너무 크게 나오고..

디테일하게 요걸 따로 하나하나  잡으려고 해도 영상크기에 따라 한도끝도 없는거 같더라구요..

그런데 이용자들이 좀 아쉬워 하는 부분이

모바일로 봤을때 화면이 작게 나온다는 부분이겠죠..뭐 그렇다고 그렇게 불편하다고는 안하더라구요

전체크기를 눌러주면 된다고 하니..

모바일로 봤을때는 아래처럼..좌우 균등하게 줄어들다보니..세로 영상이 좀 작아지는게 있어서요..

그래서 pc는 아미나 css를 그대로 쓰고..모바일만 가로가 꽉차게 보고 싶었어요

아래 처럼 말이죠..

그래서 제가 한짓이..

루트 css에 보면

apms.css 파일이 있어요. 요 부분에다가 좀 적어넣을건데..

이건...패치받을때 무작정 덮어 쓰면 다 날아가니깐..

따로 잘 적어놓고..패치에 apms.css가 들어오는 날이면..요 부분만 그때마다 다시 적어줘야겠다 싶었어요

apms.css 를 잘 보다보면

아래처럼 적힌 부분이 있어요... video 태그가 iframe으로 들어가는군요..

/* Iframe ------------------------------------------------------ */

.div-iframe { 

margin:0 auto; 

max-width:100% 

}

.div-iframe .iframe-wrap { 

position:relative; 

height: 0; 

padding-bottom: 56.25%; 

overflow: hidden; 

margin:0; 

}

.div-iframe .iframe-wrap iframe, 

.div-iframe .iframe-wrap video,

.div-iframe .iframe-wrap object,

.div-iframe .iframe-wrap embed { 

position: absolute; 

top: 0; 

left: 0; 

width: 100%; 

height:100%; 

}

요기 아랫부분에다가.....모바일일때만 다르게 한다고 추가해주는거죠..

그런데 css다보니...@media all and 를 max-width:767px로 잡았어요..

태블릿이랑 데스크탑이..768이상 부터 들어간다고 하니깐..( 더는 잘 몰라요..틀린게 있으면 배워야겠죠..)

그래서....위에 적은 코드 바로 아래에다가...

제가 작성한 아래와 같은 코드를 넣으면 될거같아요

/* video 태그 mobile에 써먹으려고 추가한것  */

@media all and (max-width:767px) {

.div-iframe { 

    overflow-x: auto;

    overflow-y: hidden;

}

.div-iframe .iframe-wrap { 

position:relative; 

height: auto;

padding-bottom: 0;

}

.div-iframe .iframe-wrap iframe, 

.div-iframe .iframe-wrap video,

.div-iframe .iframe-wrap object,

.div-iframe .iframe-wrap embed { 

    position: relative; 

    max-width: 100%;

    height: auto;

}

}

몰라서 구글해가면서 무때뽀로다가 끼워맞춰보고 빼보고..하면서 적었어요..

.div-iframe .iframe-wrap video, 쪽에다가  position: relative; 를 넣은이유는

pc쪽에서 position: absolute; 의 영향을 이어받아서..이걸 탈피하고자 적어넣은건데..

불필요한게 있을지는 모르겠는데..일딴 여러번 돌려보고 해보고 글을 남겨봅니다