웹에 영상 게시와 자동 재생되도록 하는 방법

유튜브 영상을 워드프레스, 블로그, 웹페이지에 게시할때 자동 재생되도록 하기 위해서 는 영상 임베드 코드를 삽입할 수 있다. 모바일 기기에서는 자동 재생이 안 되도록 제한되지만, 아래에서 소개하는 자바스크립트를 사용해 모바일 기기에서 재생이 가능하도록 할 수 있다.

 

또한 테마와 엘리먼터 페이지 빌더에서는 유튜브/비메오 동영상을 자동 재생되는 동영상 배경으로 설정하는 기능도 제공한다.

 

HTML 동영상 재생

MP4 파일을 서버에 업로드해 재생되도록하는 경우 아래의 코드를 사용할 수 있다.

<video controls autoplay>
 <source src="movie.mp4" type="video/mp4">
 <source src="movie.ogg" type="video/ogg">
</video>

커뮤니티에 움직이는  GIF 파일이 많이 사용되지만 오래된 규격이고 비효율적으로 mp4로 대체되고 있다.

 

유튜브 영상 자동 재생되도록 하기

동영상 파일은 서버에 직접 업로드하는 대신 유튜브 채널에 업드로해 공유하는 방법은 클라우드에 파일을 올려 여러 장소에서 가져오는 것과 같다. 이를 통해 웹페이지에 게시하는 방법이다.

임베드 코드 내의 동영상 url  뒤에 ?autoplay=1 을 추가하면된다.

 

유뷰트에서 공유하려는 영상의 공유 버튼을 클릭해 임베드 코드(링크 주소)를 복사한다.

 

<iframe width="560" height="315" 
 src="https://youtu.be/LcaE-Z8uP6M" 
 title="YouTube video player" 
 frameborder="0" 
 allow="accelerometer; 
 autoplay; clipboard-write; 
 encrypted-media; 
 gyroscope; 
 picture-in-picture" 
 allowfullscreen>
</iframe>

코드에 유뷰트 영상 URL 뒤에 ?autoplay=1을 추가한다. 크롬에서는 사용자 인터랙션 없이 오디오 콘텐츠를 자동 재생되지 않도록 막고 있다. 그래서 &mute=1 파라미터를 추가해 크롬에서도 자동 재생이 작동하도록 할 수 있다. 

<iframe width="560" height="315" 
 src="https://youtu.be/LcaE-Z8uP6M?autoplay=1&mute=1" 
 title="blog promotion" 
 frameborder="0" 
 allow="accelerometer; 
 autoplay; clipboard-write; 
 encrypted-media; 
 gyroscope; 
 picture-in-picture" 
 allowfullscreen>
</iframe>

그리고 자동 반복 재생되도록 하기 위해  &loop=1 을 추가한다.

 

반응형으로 작동하도록 하기 위해서는 CSS코드 추가가 필요하다. 스타일 시트파일에 추가하면된다. (style.css)

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.entry-content img,
.entry-content iframe,
.entry-content object,
.entry-content embed {
max-width: 100%;
}

이렇게 추가해주면 개별 글에서 YouTube 동영상을 삽입할 때 <div class="video-container">....</div> 코드를 유튜브 영상 소스코드를 둘러 싸면 된다.

<div class="video-container"> 동영상 코드 </div>

이렇게 하여 영상을 넣으면 자동 재생이되게 된다.

하지만 모바일에서는 자동 재생이 되지 않을 수 있다. 이는 모바일 기기에서 데이터를 소진하지 못하도록 제한하고 있기 때문인데 자동 재생되도록 하고 싶은 경우 아래 방법으로 가능하다. 자바스크립트 코드를 사용해 가능하다.

<div id="player"></div><script>
                    var tag = document.createElement('script');
                    tag.src = "https://www.youtube.com/iframe_api";
                    var firstScriptTag = document.getElementsByTagName('script')[0];
                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
                    var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      videoId: 'VideoID',
      playerVars: {   
            'autoplay': 1,   
            'rel': 0,
            'showinfo': 0,
            'modestbranding': 1,
            'playsinline': 1,
            'rel': 0,
            'controls': 0,
            'color':'white',
            'loop': 1,
            'mute':1,
            // 'origin': 'https://meeranblog24x7.blogspot.com/'
      },
      events: {
        'onReady': onPlayerReady,
        // 'onStateChange': onPlayerStateChange
      }
    });
  }
  function onPlayerReady(event) {
    player.playVideo();
    player.mute();
  }var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

위 코드에서 VidoID 부분을 유뷰브 영상의 vidoid로 바꾼다. 예를 들어 LcaE-Z8uP6M 와 같다. 

그리고 컨트롤을 추가해기 위해 controls : 0을 1로 바꾼다.

하지만 모바일에서 동영상 자동재생에 대해 아직 테스트해보지는 않았지만 한가지 우려 되는점은 SEO 에 어떤 영향을 줄 것인지 테스트를 해보아야 한다. 위와같은 자바코드를 통해 자동재생을 할 수 있지만 페이지 로딩 속도에 영향을 줄 수 있다.

영상 홍보 기법