유투브 API 버튼 클릭시 불러오기

// 클릭이벤트로 영상 불러오기  +일반영상포함

---

```
var tag = document.createElement('script');

tag.src = "[https://www.youtube.com/iframe_api](https://www.youtube.com/iframe_api)";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function videoOn() {
/* 		if ($('#player').prop('tagName') == 'IFRAME') {
	$('#player_box').empty();
	$('#player_box').html('<div id="player"></div>');
} *
	//INPUT URL의 값 불러오기
	var videoUrl = $("#vodUrl").val();

	var videoSt = videoUrl.lastIndexOf("/");
	var videoMa = videoUrl.lastIndexOf("?");

	var videoEq = videoUrl.lastIndexOf("v=");
	var videoMa2 = videoUrl.indexOf("&");
	$("#playerTable").empty();
	if (videoSt < 0 && videoEq < 0) {
		alert("잘못된 입력입니다.");

	} else {
		var tableset='<th rowspan="1"></th><td colspan="4"><div id="player_box"><div id="player"></div></div></td>';
		$("#playerTable").html(tableset);

		if (videoUrl.includes('youtu')) {
			//유투브
			if (videoMa < 0) {
				var videoStsub = videoUrl.substring(videoSt + 1);
			} else {
				var videoStsub = videoUrl.substring(videoSt + 1, videoMa);
			}

			if (videoMa2 < 0) {
				var videoEqsub = videoUrl.substring(videoEq + 2);
			} else {
				var videoEqsub = videoUrl.substring(videoEq + 2, videoMa2);
			}
			var videoId
			//St는 /이후 id Eq는 v=이후 id
			if (videoSt < videoEq) {
				videoId = videoEqsub;
			} else {
				videoId = videoStsub;
			}
			youtubeIfame(videoId);
		} else {
			//서울
			var basicUrl = '<object type="text/html" width="100%" height="500" data="'
					+ videoUrl + '" allowFullScreen></object>';
			$("#player").html(basicUrl);
		}
	}
}
function youtubeIfame(videoId) {
	var player;
	player = new YT.Player('player', {
		height : '315',
		width : '560',
		videoId : videoId,
		playerVars : {
			'autoplay' : 0, // 자동재생
			'controls' : 0, // 재생컨트롤 노출여부
			'autohide' : 0, // 재생컨트롤이 자동으로 사라질지의 여부
			'playsinline' : 1, // 현페이지에서 재생
		},
		events : {
			'onReady' : onPlayerReady, //로딩할때 이벤트 실행
		}

	});

}
//지우지 마세요
function onPlayerReady(event) {

}

///////////////

html 

<a href="#" class="btn_underline" onclick="videoOn();" > 불러오기</a>
<tr  class="border_none" id="playerTable">
												
</tr>
```

## 클릭이벤트 없이 불러오기

---

```
<script>
//iframe 스크립트 먼저 실행
var tag = document.createElement('script');

tag.src = "[https://www.youtube.com/iframe_api](https://www.youtube.com/iframe_api)";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

$(document).ready(function() {

});

</script>

<script>

$(window).on("load",function(){
//후에 메소드 실행
videoOn();
})

function videoOn() {
/* 		if ($('#player').prop('tagName') == 'IFRAME') {
$('#player_box').empty();
$('#player_box').html('<div id="player"></div>');
} */		

/* var videoUrl = $("#vodUrl").val(); */
		var videoUrl = $("#vodUrl").val();
		var videoSt = videoUrl.lastIndexOf("/");
		var videoMa = videoUrl.lastIndexOf("?");

		var videoEq = videoUrl.lastIndexOf("v=");
		var videoMa2 = videoUrl.indexOf("&");
		$("#playerTable").empty();
		if (videoSt < 0 && videoEq < 0) {

		} else {
			var tableset='<div id="player_box"><div id="player"></div></div>';
			$("#playerTable").html(tableset);

			if (videoUrl.includes('youtu')) {
				//유투브
				if (videoMa < 0) {
					var videoStsub = videoUrl.substring(videoSt + 1);
				} else {
					var videoStsub = videoUrl.substring(videoSt + 1, videoMa);
				}

				if (videoMa2 < 0) {
					var videoEqsub = videoUrl.substring(videoEq + 2);
				} else {
					var videoEqsub = videoUrl.substring(videoEq + 2, videoMa2);
				}
				var videoId
				//St는 /이후 id Eq는 v=이후 id
				if (videoSt < videoEq) {
					videoId = videoEqsub;
				} else {
					videoId = videoStsub;
				}
				youtubeIfame(videoId);
			} else {
				//서울
				var basicUrl = '<object type="text/html" width="1060" height="707" data="'
						+ videoUrl + '" allowFullScreen></object>';
				$("#player").html(basicUrl);
			}
		}
	}

	function youtubeIfame(videoId) {
		var player;
		player = new YT.Player('player', {
			height : '707',
			width : '1060',
			videoId : videoId,
			playerVars : {
				'autoplay' : 0, // 자동재생
				'controls' : 0, // 재생컨트롤 노출여부
				'autohide' : 0, // 재생컨트롤이 자동으로 사라질지의 여부
				'playsinline' : 1, // 현페이지에서 재생
			},
			events : {
				'onReady' : onPlayerReady, //로딩할때 이벤트 실행
			}

		});

	}
	//지우지 마세요
	function onPlayerReady(event) {

	}

    function fnMove(seq){
        var offset = $('#' + seq).offset();
        $('html, body').animate({scrollTop : offset.top}, 400);
    }
</script>

html
<div id="playerTable"></div>
```