그누보드 - 유용한 반응형 video 태그 4가지

유용한 반응형 video 태그 4가지 > 그누보드5 팁자료실

그누보드5 팁자료실

유용한 반응형 video 태그 4가지 정보

유용한 반응형 video 태그 4가지

본문

백문이 불여일견이라고

https://wittazzurri.com/editor/html_editor.php 에서 좌측창에 소스를 붙여넣고 결과보기 클릭하여 우측창으로 직접 확인하세요.

이 페이지에는 창크기 조절 옵션이 있습니다. 반응형으로 제대로 들어가나를 확인하기 위해 붙인 기능입니다.

1. 기본형.

css 에서 width 를 100% 로 주고 max-width 를 원본픽셀로 주면서 display:block 을 같이 줍니다. display:block 를 주면 div 처럼 되어서 margin:0 auto 로 쉽게 중앙정렬을 줄 수 있습니다.

video 엘레먼트의 요소에 autostart 는 브라우저에 따라 안 먹을 수 있고 loop 는 무한반복이며

controls 는 미디어바가 보여지는 옵션입니다.

controlslist="nodownload" 는 여러분이 검색해서 무슨 기능인지 찾아 보세요. 아래 소스가 비타주리가 기본형으로 사용하는 소스입니다.


<style>
.video-mp4 { width:100%; max-width:960px; display:block; margin:0 auto; }
</style>
<video class="video-mp4" src="https://blog.kakaocdn.net/dn/mN40R/btrTMfoNi0t/O1CO6fcX6dZQneYBTCrWp1/tfile.mp4" autoplay loop controls controlslist="nodownload"></video>

----------

2. 풀스크린 버튼 삭제형

오디오 태그와 비디오 태그에는 가상자 css 가 있습니다. 이걸 이용하여 풀스크린을 사용하지 않을 동영상은 풀스크린 버튼을 display:none 해 줍니다.


<style>
.video-mp4 { width:100%; max-width:960px; display:block; margin:0 auto; }
.video-mp4::-webkit-media-controls-fullscreen-button { display:none; }
</style>
<video class="video-mp4" src="https://blog.kakaocdn.net/dn/mN40R/btrTMfoNi0t/O1CO6fcX6dZQneYBTCrWp1/tfile.mp4" autoplay loop controls controlslist="nodownload"></video>

----------

***** 참고사항. pc에만 먹는 자체버튼형

비디오 자체버튼을 사용하려면 하단의 미디어바 자체를 날려야 합니다. 이것도 가상자 css 가 있습니다.

그럴 경우 video 의 style 에 cursor:pointer 를 추가해 주고 예제 동영상처럼 영상 안에 버튼을 암시하는 이미지(빨간 버튼)를 하나 넣어 줘야 보는 사람들이 클릭을 해 볼 것입니다.

그런데...

중요한 건 아래처럼 사용하면 pc 의 경우에는 미디어바가 없어지면서 자체버튼으로 온오프가 되지만 모바일에서는 미디어바 자체가 없어지는 것이 아니라 상단으로 붙어버리는 일종의 "기현상"이 발생합니다.


<style>
.video-mp4 { width:100%; max-width:960px; display:block; margin:0 auto; cursor:pointer; }
.video-mp4::-webkit-media-controls-panel { display:none; }
</style>
<video class="video-mp4" src="https://blog.kakaocdn.net/dn/mN40R/btrTMfoNi0t/O1CO6fcX6dZQneYBTCrWp1/tfile.mp4" autoplay loop controls controlslist="nodownload"></video>

----------

3. 온전한 자체 버튼형

사실 이 문제를 타개하려면 미디어쿼리로 pc와 모바일을 분기하고 css 를 따로 주면 되지만 그냥 한번에 다 적용되는 방법을 찾느라 잔대갈빡을 굴리다 결국 미디어바 전체를 역마진으로 처올려 보자는 생각이 들어서 그렇게 코드를 수정하니 pc 와 모바일 전체에서 잘 들어 맞습니다. 단 미디어바에 마진을 적용하려면 display:block 을 줘야 되더라구요.


<style>
.video-mp4 { width:100%; max-width:960px; display:block; margin:0 auto; cursor:pointer; }
.video-mp4::-webkit-media-controls-panel { display:block; margin-top:-100%; }
</style>
<video class="video-mp4" src="https://blog.kakaocdn.net/dn/mN40R/btrTMfoNi0t/O1CO6fcX6dZQneYBTCrWp1/tfile.mp4" autoplay loop controls controlslist="nodownload"></video>

----------

4. 이미지형 묵음 비디오

이건 마치 mp4 가 gif 처럼 기능합니다. 사운드가 있는 동영상도 묵음 처리됩니다.

개인적으로 굉장히 즐기는 형태인데 그 이유는 무조건 자동재생이 되고 홈페이지 대문에 머리 굴려 가며 자바스크립트로 메인 갤러리를 만들 필요없이 적당한 동영상 프로그램으로 갤러리 10메가 짜리 하나만 만들면 아주 훌륭한 메인 갤러리가 되기 때문입니다.

한마디로 그냥 gif 입니다.


<style>
.video-mp4 { width:100%; max-width:960px; display:block; margin:0 auto; }
</style>
<video class="video-mp4" src="https://blog.kakaocdn.net/dn/mN40R/btrTMfoNi0t/O1CO6fcX6dZQneYBTCrWp1/tfile.mp4" autoplay loop muted></video>

----------

크롬과 안드로이드에서만 테스트 하였습니다.

사용한 동영상은 제 오랜 웹지기이신 빨간구두님 동영상입니다.