• 1:1 문의
  • 회원가입
  • 로그인

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

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

 

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

<style>

video {

  width: 100%;

  height: auto;

}

</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>


결과보기


 

예제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 속성의 태그임. 가운데정렬 시키려면, 핑크색 코드 추가해야 함.

즐겨찾기 (= 북마크) : Ctrl + D
오늘도 찾아주셔서
정말 감사합니다.

( ^ ____ ^ ) ===b

방문자 수

오늘 367
어제 390
최대 583
전체 426,887
Since 2012