[YOUTUBE] 유튜브 iframe, api

광고회사에서 유튜브 영상을 사용하는 것은 필수 필수~~~~

1. iframe 

단순하게 재생되는 동영상을 넣을 때.

<iframe src="https://www.youtube.com/embed/영상주소?showinfo=0&amp;rel=0&amp;autoplay=0&amp;autohide=1&amp;controls=0&amp;playsinline=1" frameborder="0" allowfullscreen></iframe> 

=> iframe 자체에 옵션을 준다. showinfo와 rel은 필수. 

=> 나는 주로 감싸는 박스에 해당 이미지를 잘라서 그 이미지 위에 position:absolute를 준 뒤 그 안에서 width:100%;height:100%를 준다. 그러면 감싸는 박스 width, height 값만 조절하면 영상 크기는 알아서 잘~

https://developers.google.com/youtube/youtube_player_demo

=> 유튜브 iframe 만들어주는 사이트. 근데 난 이거 별로 ㅎ 

2. api

동영상에 어떠한 이벤트를 걸고 싶을 때.

ex) 동영상이 끝나고 난 뒤 버튼이 생기게, 동영상 일시정지, 재생 이벤트 걸 때

// YOUTUBE

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', {

height: '100%',

width: '100%',

videoId: '영상주소',

playerVars: {

   'autoplay': 0, // 자동재생

   'controls': 0, // 재생컨트롤 노출여부

   'autohide': 0, // 재생컨트롤이 자동으로 사라질지의 여부

   'rel': 0, // 동영상 재생완료 후 유사동영상 노출여부

   'playsinline': 1, // 현페이지에서 재생

   'wmode': 'transparent'

},

events: {

   'onReady': onPlayerReady,

   'onStateChange': onPlayerStateChange

}

 });

}

var playerState;

var playNum = 0;

function onPlayerStateChange(event) {

 playerState = event.data == YT.PlayerState.ENDED ? 'end' :

event.data == YT.PlayerState.PLAYING ? 'playing' :

event.data == YT.PlayerState.PAUSED ? 'stop' :

event.data == YT.PlayerState.BUFFERING ? 'buffering' :

event.data == YT.PlayerState.CUED ? 'playready' :

event.data == -1 ? 'not start' : 'error';

if (playerState == "end") {  

  

이벤트 넣기

  

   }

}

function onPlayerReady(event) {

event.target.setVolume(0);//볼륨 크기

}

player.playVideo(); //video play

player.stopVideo(); //video stop

onPlayerReady(); // 볼륨크기 0으로 준 함수

이건 내가 ㄷㅅㅈㄱ팝업에 넣은 유튜브다.

기획자가 동영상 뷰값을 높이기 위해 팝업이 열릴때 동영상이 자동재생이 되었으면 좋겠다고 했다.

웹접근성에는 어긋나지만,, 할많하않...

iframe으로는 컨트롤이 어려우니 api를 사용한다.

웹에서는 소리가 난 채로 자동재생을 하고, 팝업이 넘어가거나 창을 닫으면 영상이 꺼지게 하면 되는데

아이폰은 유튜브 자동재생이 안되므로 그냥 패스한다. 

그리고 기획자의 추가 요청 사항.  모바일에서 음소거인 상태로 자동재생이 되게 해달라고 한다.

mute를 걸면 될 것 같은데 그게 잘 안된다. 방법이 있겠지만 난 못 찾겠다. 빠른포기ㅎㅎ

그래서 볼륨크기를 0으로 해서 재생하는 방법으로 순회하기로 했다.

그렇게 이번 유튜브 영상은 해결~

---

https://jsfiddle.net/Kimara/wLpy82vt/2/

엘지씽큐 홈페이지 보다가~ 썸네일이 참 예쁘게 들어가 있어서 어떻게 한걸까 보다가

따라 만들어봤음. 앞으로 이렇게해도 괜찮을듯!