최근에는 배경으로 동영상을 사용하는 경우도 많다 멈춰있는 이미지보다 화면 전체에 깔린 동영상은 방문자의 호기심을 좀 더 자극해 끝까지 보게 만들 수 있기 때문이다
<video> 태그를 사용해 동영상을 배경처럼 삽입하는 방법과 jQuery 플러그인을 사용해 동영상을 삽입하는 방법에 대해 알아보자
만들기 전 준비해야 할 것
동영상 풀 스크린 배경을 만들기 전에 먼저 웹 서버에서 최신 동영상 파일 확장자를 인식하는지 확인해야 한다 그리고 <video> 태그를 인식하지 못하는 구식 브라우저나 모바일에서 실행될 경우를 대비해 동영상 대신 표시할 포스터 이미지도 따로 준비해두어야 한다
서버의 MIME 유형 설정
사용자 컴퓨터에서는 제대로 실행됐던 동영상이 웹 서버에 올리고 나서 재생이 되지 않아 난감한 경우가 종종 있다. 이는 웹 서버에서 동영상 파일 확장자를 인식하지 못해서 발생하는 문제이므로 서버의 .htaccess 파일에서 다음과 같이 MIME 유형을 지정해주면 된다
AddType video/webm .webm
AddType video/mp4 .mp4
AddType video/ogg .ogv
직접 서버를 운용하지 않고 호스팅 업체에 맡기고 있다면 업체 관리자에게 위의 MIME 유형을 알려주고 추가해달라고 하면 된다
html5shiv 파일 포함
인터넷 익스플로러 8 이하 버전에서는 <video> 태그를 비롯한 HTML5의 새로운 태그를 인식하지 못한다
따라서 배경 동영상 대신 CSS에서 지정한 배경 이미지라도 표시하기 위해 최소한 <video> 태그의 속성을 이해할 수 있어야 한다 이를 위해 html5shiv.js 파일을 웹 문서에 링크해서 인터넷 익스플로러 8 이하 버전에서도 HTML5 태그를 인식할 수 있게 해줘야 한다
다음 코드에서 <!— [if lt IE 9]> 는 인터넷 익스플로러 9 이하일 때 그다음 줄을 실행하라는 의미이다 그래서 인터넷 익스플로러 10 이상이나 다른 브라우저에서는 이 조건을 보고 그냥 건너뛴다
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
CSS3를 사용해 풀 스크린 배경 동영상 만들기
이미지로 풀 스크린 배경을 만들 때와 마찬가지로 배경 동영상을 삽입할 때도 CSS를 사용할 수 있다
<video> 태그로 동영상을 삽입한 후 CSS로 전체 화면에 가득 차게 만드는 방법인데 2018년 1월 이후 크롬 브라우저에서 동영상 자동 재생을 금지하고 있기 때문에 크롬 브라우저에서는 이 방법으로 배경 동영상을 재생할 수 없다
Ex.
동영상 파일을 준비한 후 <video> 태그를 사용해 다음과 같이 동영상을 삽입한다. 삽입위치는 <body> 태그 뒤이다.
<video autoplay loop poster="images/seagull.jpg" id="videoBg">
<source src="videos/seagull.webm" type="video/webm">
<source src="videos/seagull.mp4" type="video/mp4">
<source src="videos/seagull.ogv" type="video/ogg">
배경으로 비디어를 삽입하는 태그에서 id=”videoBg” 로 지정했으므로 #videoBg 스타일을 정의하는 소스를 삽입한다. 이 소스는 스타일 시트 중 어디에 넣어도 상관없지만 문서의 흐름에 따라 이해하기 쉽도록 #container 스타일 앞에 삽입한다. 다음 코드를 fvideo.css 파일에 추가한다
#videoBg{
position:fixed;
right:0;
bottom:0;
width:auto;
min-width:100%;
height:auto;
min-height:100%;
z-index:-100;
background:url(../images/seagull.jpg) no-repeat;
}
미디어 쿼리 작성하기
@media screen and (max-width: 800px){
body{
background: url(../images/seagull-m.jpg) no-repeat fixed center #000;
background-size: cover;
}
#videozbg{
display:none;
}
}
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fullscreen Background Video</title>
<link href="css/fvideo-result.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<video autoplay loop poster="images/seagull.jpg" id="videoBg">
<source src="videos/seagull.webm" type="video/webm">
<source src="videos/seagull.mp4" type="video/mp4">
<source src="videos/seagull.ogv" type="video/ogg">
</video>
<div id="container">
<h1>Jonathan Livingston Seagull</h1>
</div>
</body>
</html>
jQuery 플러그인을 사용해 동영상 풀 스크린 배경 만들기
Vide.js 플러그인
이 플러그인은 동영상을 배경으로 삽입할 수 있게 해주는 플러그인으로 인터넷 익스플로러 9 이상의 모든 브라우저에서 동작하며 모바일 브라우저에서는 지정한 포스터 이미지를 보여준다
Ex.
CSS
@import url('<https://fonts.googleapis.com/css?family=Courgette>');
* {
margin:0;
width:100%;
height:100%;
}
h1 {
position:relative;
top:150px;
text-align:center;
font-family: 'Courgette', cursive;
font-size:5em;
color:white;
}
Html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>모던 웹 디자인</title>
<link href='css/vi.css' rel='stylesheet'>
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
</head>
<body data-vide-bg="videos/stream">
<h1>Fullscreen Video</h1>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.vide.min.js"></script>
</body>
</html>
유튜브 동영상으로 풀 스크린 배경 만들기 - tubular 플러그인
배경으로 사용할 동영상이 유튜브에 있을 경우 그 동영상을 플 스크린 배경으로 사용할 수 있게 해주는 tubular 플러그인 사용법에 대해 알아보자
기본문서 만들기
<body>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.tubular.1.0.js"></script>
</body>
tubular 플러그인은 #wrapper 라는 요소로 문서 전체를 감싼 후 그 요소에 유튜브 동영상을 배경으로 깔아준다
<div id="wrapper"></div>
배경으로 사용할 유튜브 동영상을 선택했다면 재생 화면의 주소 표시줄에서 watch?v= 다음의 문자열인 동영상의 아이디를 복사한 다음 다음 코드를 </body> 앞에 삽입하면 된다
<script>
$("document").ready(function(){
var options={
videold:'FAyKQn34ccA',
start:8
};
$('#wrapper').tubular(options);
});
</script>
Ex.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tubular 플러그인 연습</title>
</head>
<body>
<div id="wrapper"></div>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery.tubular.1.0.js"></script>
<script>
$("document").ready(function(){
var options={
videold:'FAyKQn34ccA',
start:8
};
$('#wrapper').tubular(options);
});
</script>
</body>
</html>
'프론트 개발' 카테고리의 다른 글
| [ FE ] Do it! 프런트엔드 웹디자인 입문 11-2 캡션, 비디오, 반응형 등 다양한 옵션 설정이 가능한 bxSlider 플러그인 (0) | 2026.02.26 |
|---|---|
| [ FE ] Do it! 프런트엔드 웹디자인 입문 11-1 캐러셀이란? (0) | 2026.02.25 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 10-1 풀 스크린 배경 이미지 직접 만들기 (0) | 2026.02.25 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 09-3 플렉스 박스 사용하기 (0) | 2026.02.24 |
| [ FE ] Do it! 프런트엔드 웹디자인 입문 09-2 jQuery 플러그인을 사용해 그리드 레이아웃 만들기 (0) | 2026.02.24 |