29. [HTML] 비디오 배경 넣기

안녕하세요. 이번 포스팅에서는 배경에 [video] 를 넣는 방법에 대해서 학습하겠습니다. 

유행이 지났지만 이런것도 있구나.. 하면서 넘어가시면 될 것 같습니다. 

 

video 삽입 기본 골격

 

HTML

<div class='video-box'>
	<video class='video-container' poster='../이미지파일/lion.png' autoplay muted loop>
		<source src='Sunset%20-%2010737.mp4' type='video/mp4'>
	</video>
</div>

<iframe> 같은 태그로 삽입하는 방법도 있지만 <video> 태그를 이용하는 것이 스타일링에 있어서 더 깔끔하게 다룰 수 있습니다. 

 

<video> 태그로 감싸고 그 내부에 <source> 태그를 포함합니다. 

<source> 태그는 비디오의 파일 경로를 지정해줍니다. 

 

<video> 태그 속성

▶ poster : 비디오 안뜰 때 대체 이미지 

▶ autoplay : 자동 재생 

▶ muted : 음소거 

▶ loop : 반복 재생 

 

<source> 태그 속성

▶ src : 비디오 경로

▶ type : 비디오 파일의 확장자

 

비디오 중앙정렬 하는 방법 

1. position : absolute; (상위요소에서 붕 띄우겠다) // 상위요소에 position : relative; 반드시 추가할 것 2. top : 50%; 3. left : 50%; 4. transform: translate(-50%,-50%);

 

CSS

.video-box {
    background-color: aquamarine;
    width : 70%;
    height : 700px;
    overflow: hidden;
    position: relative;
}

.video-container {
/*    부모 요소에 대비하여 붕 띄워서 왼쪽에서부터 위에서부터 50% 만큼 이동*/
    position : absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%,-50%);
    z-index : 0; /* 밖으로 뛰쳐나오지 않게 우선순위를 낮춘다.*/
}