[javascript] youtube 삽입 시 자동재생 방법 / 유튜브 영상 자동재생

유튭 영상 우클릭 > 소스코드 복사하여 iframe을 따온다.
소스에 붙여넣기 하면 됨.

 

PC 웹에 추가 

* 자동재생을 하려면 링크 끝에 아래 텍스트 추가
?autoplay=1&mute=1

<iframe width="1000" height="562.5" src="https://youtu.be/aBcDEFGh3IJ?autoplay=1&mute=1" title="영상제목" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>

 

모바일버전 웹에 추가 

* 모바일에서 자동재생을 하려면 IFame Player API를 사용하면 됨.
참고)https://developers.google.com/youtube/iframe_api_reference

//youtube 영상을 표시할 div
<div id="player1" style="width:100%">

//youtube 스크립트 파일 url 추가
<script src="https://www.youtube.com/iframe_api"></script>

//자동재생 함수 추가
<script>
var player;
function onYouTubeIframeAPIReady() {
	player = new YT.Player('player1', {
		videoId: 'aBcDEFGh3IJ', //유튭 영상ID
		playerVars: {   
				'autoplay': 1, //자동재생
				'rel': 0,
				'showinfo': 0,
				'modestbranding': 1,
				'playsinline': 1,
				'rel': 0,
				'controls': 1,	//youtube 콘트롤 표시
				'color':'white',
				'loop': 1, //반복 여부  
		},
		events: {
		'onReady': onPlayerReady,
		}
	});
}

function onPlayerReady(event) {
	player.playVideo();
	player.mute(); //자동재생하려면 mute해야함
}

</script>