비디오 배경을 설정하는 6가지 예제를 아래에서 설명하고, 각 예제에 대한 CSS와 HTML 코드를 제공하겠습니다. 비디오 배경을 사용하면 웹 페이지에 동적하고 멋진 배경을 추가할 수 있습니다.
예제 1: 기본 비디오 배경
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 비디오 배경 스타일 */
video {
object-fit: cover;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
<title>기본 비디오 배경</title>
</head>
<body>
<video autoplay loop muted>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h1>Hello, Video Background!</h1>
</body>
</html>
이 예제는 기본적인 비디오 배경을 설정합니다. <video> 요소를 사용하여 비디오를 추가하고, CSS를 사용하여 비디오를 전체 화면으로 확대하고 배경으로 고정합니다.
예제 2: 비디오 컨트롤 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 비디오 배경 스타일 */
video {
object-fit: cover;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
/* 비디오 컨트롤 스타일 */
.video-controls {
text-align: center;
padding: 20px;
}
</style>
<title>비디오 컨트롤 추가</title>
</head>
<body>
<video autoplay loop muted controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="video-controls">
<h1>Hello, Video Background!</h1>
</div>
</body>
</html>
이 예제는 비디오 컨트롤을 추가한 비디오 배경을 설정합니다. controls 속성을 사용하여 비디오 컨트롤을 활성화합니다.
예제 3: 비디오 반복 설정
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 비디오 배경 스타일 */
video {
object-fit: cover;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
<title>비디오 반복 설정</title>
</head>
<body>
<video autoplay loop muted>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h1>Hello, Video Background!</h1>
</body>
</html>
이 예제는 비디오를 반복 재생하도록 설정합니다. loop 속성을 사용하여 비디오를 반복 재생합니다.
예제 4: 비디오 재생 속도 조절
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 비디오 배경 스타일 */
video {
object-fit: cover;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
</style>
<title>비디오 재생 속도 조절</title>
</head>
<body>
<video autoplay loop muted playbackRate="0.5">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h1>Hello, Video Background!</h1>
</body>
</html>
이 예제는 비디오의 재생 속도를 조절합니다. playbackRate 속성을 사용하여 비디오의 재생 속도를 0.5배로 설정합니다.
예제 5: 비디오 컨트롤 사용자 정의
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 비디오 배경 스타일 */
video {
object-fit: cover;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
/* 사용자 정의 비디오 컨트롤 스타일 */
.video-controls {
position: absolute;
bottom: 20px;
left: 20px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 10px;
border-radius: 5px;
}
</style>
<title>비디오 컨트롤 사용자 정의</title>
</head>
<body>
<video autoplay loop muted>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="video-controls">
<button onclick="playPause()">Play/Pause</button>
<button onclick="muteUnmute()">Mute/Unmute</button>
</div>
<h1>Hello, Video Background!</h1>
<script>
const video = document.querySelector("video");
function playPause() {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function muteUnmute() {
if (video.muted) {
video.muted = false;
} else {
video.muted = true;
}
}
</script>
</body>
</html>
이 예제는 사용자 정의 비디오 컨트롤을 추가합니다. JavaScript를 사용하여 비디오를 재생/일시정지하거나 음소거/음소거 해제할 수 있는 버튼을 만듭니다.
예제 6: 비디오 필터 적용
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 기본 스타일 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 비디오 배경 스타일 */
video {
object-fit: cover;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -1;
filter: grayscale(100%);
}
</style>
<title>비디오 필터 적용</title>
</head>
<body>
<video autoplay loop muted>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h1>Hello, Video Background!</h1>
</body>
</html>
이 예제는 비디오에 필터를 적용하여 흑백으로 변환합니다. filter 속성을 사용하여 비디오에 그레이스케일 필터를 적용합니다.
'CSS' 카테고리의 다른 글
| 다중 열 텍스트: 다중 열 텍스트 레이아웃 구현. (0) | 2023.12.23 |
|---|---|
| 타이포그래피 스타일링: 텍스트 타이포그래피 스타일 조절. (0) | 2023.12.23 |
| 텍스트 음영: 텍스트 음영(글자 그림자) 설정. (0) | 2023.12.23 |
| 레이지 로딩: 이미지 레이지 로딩 구현. (0) | 2023.12.23 |
| 아코디언 메뉴: 아코디언 메뉴 스타일링. (0) | 2023.12.23 |
