반응형
광고 매체의 홈페이지를 접속하면 메인 화면에서 자동으로 재생되는 동영상을 흔하게 볼 수 있습니다. 이번 포스팅은 <video> 태그를 이용해서 간단한 동영상을 띄워보겠습니다. 저번 이미지 태그 포스팅에서도 말씀드렸지만 저작권에 주의해서 사용해주셔야합니다. HTML을 이용해서 동영상을 띄우는 방법은 두 가지가 있습니다.
<iframe> 태그
유튜브에 게시된 동영상을 가져와서 출력
<video> 태그
직접 가지고 있는 동영상 파일을 출력
video 태그 기본 구조
<video> 태그는 주로 <div> 태그와 함께 사용합니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>비디오 태그</title>
</head>
<body>
<div>
<video>
<source src="경로/파일명.mp4" type="video/mp4" autoplay controls>
</video>
</div>
</body>
</html>| 속성 | 설명 |
| autoplay | 자동 재생 ※ 지정할 경우 preload는 무시 |
| controls | 제어 컨트롤러 표시 |
| crossorigin | 외부의 특정한 사이트에서 동영상을 가져올 때 동일한 출처인지 확인 여부 |
| loop | 반복 재생 |
| preload | 사용자의 사용 여부에 관계없이 전체 오디오를 다운로드 |
| src | 동영상이 존재하는 경로 혹은 URL 지정 |
| muted | 출력 중지 |
| poster | 썸네일 |
| width, height | 너비, 높이 |
유튜브에 있는 동영상 가져오는 방법 (iframe 태그)
1. 유튜브 원하는 동영상에서 [공유] 버튼 클릭
2. [퍼가기] 버튼 클릭 후 [동영상 퍼가기]의 소스를 복사/붙여넣기
동영상 태그 기본 CSS
이미지 태그에 이어서 동영상 태그도 기본적으로 CSS를 이용해야합니다. 이번에도 필요한 부분만 설명드리고 자세한 설명은 CSS 포스팅에서 알아보겠습니다.
<style>
div {
position: relative;
padding-bottom: 56.25%; // 16:9 비율, 75% - 4:3 비율
overflow: hidden; // hidden을 하지않으면 영상이 삐져나옴
}
video {
min-width: 100%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(50%, 50%);
}
</style>
반응형
'웹 디자인 > HTML · CSS' 카테고리의 다른 글
| [HTML·CSS] div태그로 화면 공간 분할하기 (0) | 2022.10.05 |
|---|---|
| [HTML/CSS] table 태그로 표 만들기 (tr, th, td 태그) (0) | 2021.12.17 |
| [HTML/CSS] a 태그와 이미지 태그 사용해보기 (map 태그) (0) | 2021.12.16 |
| [HTML/CSS] 기본적인 글꼴 태그 알아보기 (0) | 2021.12.08 |
| [HTML/CSS] 필수 태그와 주석 처리 알아보기 (html, head, body 등) (0) | 2021.12.07 |