HTML 반응형 비디오 코드 동영상 모바일 적용

여러분의 블로그 동영상 제대로 돌아가나요? 글쓴이는 늘 고민이 하나 있었습니다. PC화면에서 640x360 크기로 동영상을 보여주면 아무런 문제가 되지 않지만 모바일 화면에서 보여주면 너무나 화면이 컸습니다. 어떤 문제가 있는지 살펴볼까요?

 

 

HTML 반응형 비디오 코드 동영상 모바일 적용

 

640x360 크기인 동영상 비디오는 반이 짤렸습니다. 물론 클릭을 하게 되면 볼 수 있어요. 하지만 많은 사람들이 불편할 수도 있습니다. 그러니까 아래처럼 동영상이 작아져야해요. 이런게 바로 반응형 비디도 코드입니다. 모바일에서도 적용되어야 해요.

 

이쯤되면 글쓴이에게 항의할지도 모르겠네요. 티스토리를 쓰고 계신 분이라면 반응형 스킨을 쓰는 분도 있고 그냥 일반 스킨에 티스토리 모바일 전용 스킨을 쓰고 있을지도 모르겠네요. 여러분의 스킨이 반응형 스킨이 아니라서 HTML 반응형 비디오 코드를 적용할 수 없다고요? 알려드리겠습니다.

 

 

 

HTML 비디오 태그 알고 계신가요? 여러분이 이 video tag를 쓴다면 다음과 같이 쓸 겁니다.

<video width="640" height="360" controls preload="metadata">
  <source src="http://blogchannel.com/yourvideo.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

 

위 HTML 비디오 태그는 동영상 크기를 640x360로 맞추고 전부 로드하지 않고 메타데이터만 가져오겠다는 코드입니다. 이 코드가 모바일에서 적용되면 가로 640으로 모바일 가로 화면 360 사이즈에서 큰 화면이 되고 맙니다. 화면을 돌리면 큰 문제는 없습니다만 자동으로 변환하게 해줄 수 있는 비디오 코드가 있습니다.

 

<style>
video { 
   width:100%;
   max-width:640px;
   height:auto;
}
</style>

 

위 코드는 가로 크키를 640px로 맞추고 640px보다 화면이 더 작을 경우에는 가로 크기를 화면에 맞게 100%로 두겠다는 이야기입니다. 높이 경우 가로 크기에 따라 자동으로 변환하겠다는 이야기이지요. 여러분의 스킨이 반응형이라면 위 코드를 css에 넣고 그게 아니라면 본문 안에 <video>태그를 사용하기전 <style>코드를 적용시켜야 합니다.

 

HTML 반응형 비디오 코드 동영상 모바일 적용된 그림은 아래와 같습니다. 아래는 티스토리 전용 모바일입니다. 어때요? 스마트폰이 화면이 가로 360px인데 동영상 가로 크기가 알맞게 적용된 거 보이시나요? PC화면에서는 썸네일이 보이던데 모바일 화면에서는 재생를 하기 전에는 썸네일이 보이지 않습니다. 썸네일을 원한다면 아래와 같은 코드를 추가하면 됩니다.

 

<video controls poster="/images/w3html5.gif">

 

 

HTML 반응형 비디오 코드 동영상 모바일 적용된 두번째 그림은 아래와 같습니다. 가로 화면으로 변경해도 화면 크기따라 잘 움직입니다. 어렵지 않죠? 위 코드 하나로 손쉽게 반응형 코드를 생성할 수 있습니다. 이처럼 모바일에서 좋은 화면을 제공할 경우 여러분의 사이트 혹은 블로그에 사람들이 더 많은 시간 체류할 것입니다.

 

HTML 반응형 비디오 코드 동영상 모바일 적용된 진짜 동영상은 아래와 같습니다. 아래는 일반 스킨이 아니라 반응형 스킨이라 알아서 제어가 됩니다. 720px로 나왔네요. 여러분의 일반 스킨에서는 잘 동작 할 것입니다.

 

 

   

[Copyright ⓒ 블로그채널 blogCHANNEL 무단전재 및 재배포 금지]