멀티미디어 요소 + 반응형 (video, iframe)

이미지, 동영상 등 미디어 요소에 대해 알아보자!

 

<video>: 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN

속성	값	설명
src	url	삽입(embed)할 동영상 주소 <source>태그 사용해서 삽입할 동영상 명시 가능
autoplay	true	자동재생 여부 (autoplay="false"는 동작 안해서 autoplay 속성을 완전히 제거해야지 autoplay가 비활성화된다.)
buffered		미디어의 어느 시간대의 버퍼에 들어있는지 확인할 수 있는 속성
controls	존재 / 미존재	속성이 존재시, 동영상 컨트롤러가 보여진다.
crossorigin	anonymous use-credentials	CORS 사용해서 관련 이미지 패치해야 하는지 여무 나타냄
width	너비값(px)	비디오의 출력 영역 너비
height	높이값(px)	비디오의 출력 영역 높이
loop	true / false	loop 자동여부
muted	true / false(기본값)	소리 나오는것 여부
played		재생된 동영상 영역 나타내는 객체
preload	none metadata auto 빈문자열(auto)	none : 서버가 최소한 트래픽 유지하고자함, 비디오가 캐시되지 않아야함 metadata : 메타데이터를 미리 가져오는 것 auto : 사용자가 우선순위, 사용안해도 필요하면 전체 비디오가 다운로드될 수 있음 기본값으로 metadata 권장, 미설정시 각 브라우저 정한 기본값을 따름

<!-- video 태그만 사용 -->
<video src="비디오 url"></video>

<!-- video + source 태그 같이 사용 -->
<video>
  <source src="비디오 url"></source>
</video>

 

 

<source>: The Media or Image Source element - HTML: HyperText Markup Language | MDN

<video>
	<source src="비디오 url" type="video/mp4"></source>
	<source src="비디오 url" type="video/ogg"></source>
	<source src="비디오 url" type="video/webm"></source>
</video>

type에는 비디오의 확장자를 작성해줘야한다. type 속성은 꼭 지정해주는 것으로!! (미 지정시 트래픽 낭비)

---

img, video {
	width: 100%;
	max-width: 100%;
}

 

 

이미지와 동영상에 너비값과 최대너비값에 100%를 부여 -> 멀티미디어 요소가 가변적으로 작동

📌 width와 max-width의 차이점

width 100%는 요소 크기를 100%로 유지
max-width 100%로 설정하면 요소의 기본 크기 이상으로 크기가 조정되지 않음

 

기본적으로 동영상요소는 16:9 비율로 이뤄져있다.

CSS의 aspect-ratio속성을 이용하면 쉽게 16:9 비율을 가변적으로 유지할 수 있지만 

aspect-ratio가 꽤 최신 속성이라서 지원안하는 브라우저도 있다. 

그 경우에는 아래글 참고

[CSS] 이미지 종횡비 유지하기

---

스크립트를 이용해 자동으로 가변적이게 만들 수도 있음

아래 주소의 jquery library를 사용하면 된다.

FitVids.JS - A lightweight, easy-to-use jQuery plugin for fluid width video embeds.