[script] 유튜브 커버 커스텀 하기

원하는 유튜브 링크를 추가했을 때 화면상에 해당 영상의 인트로 이미지가 나온다.

아래 처럼.

autoplay가 아닌 영상 시작 전 intro

 

그치만 디자인에 따라 재생 버튼 또는 시작 전 intro가 변경 될 수 있다. 

(위에 타이틀에서 말한 유튜브 커버란 아래처럼 재생 버튼 또는 시작 전 intro 디자인을 말한다.)

 

해당 소스는 다음과 같다.

#eventTutor .video-box .yt_box {
 width: 702px;
 height: 394px;
 background: url('https://www.home-learn.co.kr/front/imgs/event/event_aitutor/cover_youtube_aitutor.jpg') no-repeat center top;
 background-size: contain;
 cursor: pointer;
}

<div class="video-box" name="playCover">
  <div class="yt_box" title="동영상 보기"></div>
</div>

$('div[name="playCover"]').click(function(){
  var playCoverIndex = $('div[name="playCover"]').index(this),
  playurl = '',
  playHtml = '';
  if(playCoverIndex == 0 ) {
    playurl = 'https://www.youtube.com/embed/wvAL45BZnh0?autoplay=1';
  }
  playHtml 
  += '<iframe width="702" height="394" src="' + playurl +'" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
   $(this).find('.yt_box').html(playHtml);
  });

커버를 백그라운드 이미지 스타일로 빼고, 커버를 클릭시 이벤트가 발생하여 대상 영상이 자동으로 재생 하였다.

자동으로 하기 위해서 해당 영상 url 끝에 파라미터 값을 붙여야한다.

 

어떠한 파라미터 값을 붙여야 하냐면 autoplay=1

자동 재생을 true(1) 즉, 자동 재생을 하겠다는 의미이다. 

 

따라서 해당 커버를 눌렀을 때 설정한 파라미터 값대로 영상이 자동 재생된다.

 

참고 :

유튜브 코드에 추가하기

jintrue.tistory.com/entry/coding-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EC%BD%94%EB%93%9C%EC%97%90-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0

[coding] 유튜브 코드에 추가하기