video : 동영상 삽입하기

video 태그를 이용한 동영상 삽입하기!

video태그 옵션

• autoplay : 자동재생 기능
  크롬에서는 이 기능을 막기 때문에 muted 속성을 함께 기재해준다.
• controls : 재생버튼 넣기
• loop : 무한재생
  
  

사용법

1. 기본 영상 넣기

<div class="video-container">
    <video autoplay muted controls src="./media/move.mp4"></video>
</div>

2. source : 다양한 확장자 넣기 / poster : 영상 시작에 사진이 보이도록

<div class="video-container">
        <video controls poster="./images/picture.jpg">
          <source src="./media/move.mp4" type="video/mp4"/>
          <source src="./media/move.ogg" type="video/ogg"/>
          <source src="./media/move.webm" type="video/webm"/>
        </video>
</div>

3. 유튜브 동영상 넣기 : 동영상 오른쪽 버튼 > 소스코드 복사 > 속성에 붙여넣기

<div class="video-container">
    <iframe width="640" height="360" src="https://www.youtube.com/embed/6H-FciFG1hU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

4. 동영상을 전체 배경으로 넣기

HTML

<div class="video-container">
	<video autoplay muted loop>
    	<source src="./media/move.mp4" type="video/mp4">
    </video>
</div>

CSS

<style>
    .video-container{
    	position: fixed;
        left:0;
        right:0;
        top:0;
        bottom:0;
      }
      
    .video-container>video{
    	width:100%;
        min-width:2200px;
        height:auto;
      }
</style>

• position:fixed 를 이용하여 고정해준 후, 사방으로 위치 0을 넣어준다.
• 동영상이 화면에 꽉 차게 늘어나면서 브라우저의 비율에 따라 비는 공간이 생긴다.
  때문에, video 태그에 width를 100%, min-width(최소너비)를 2200px 정도 최대한 크게 설정해준다. 높이는 auto.

아래 홈페이지와 같이 메인페이지에 동영상 삽입을 활용할 수 있다.
해남 솔라시도