[responsive] CSS - RES Video - (반응형 동영상)

RES Video 예제1 - 부모요소너비의 100%만큼 차지

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

video {

  width: 100%;

  height: auto;

  max-width:640px;

}

</style>

<video width="400" controls>

  <source src="mp4 영상주소" type="video/mp4">

  <source src="ogg 영상주소" type="video/ogg">

  Your browser does not support HTML5 video.

</video>

결과보기

RES Video 예제2 - 영상원본크기를 최대크기로 설정

 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

video {

  max-width: 100%;

  height: auto;

  margin:0 auto;

  display:block;  

}

</style>

<video width="400" controls>

  <source src="mp4 영상주소" type="video/mp4">

  <source src="ogg 영상주소" type="video/ogg">

  Your browser does not support HTML5 video.

</video>

결과보기

※ video 태그는 inline 속성의 태그임. 가운데정렬 시키려면, 핑크색 코드 추가해야 함.