<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript">
var $videoId = "";
function play() {
var url = document.getElementById("youtube-url").value.trim();
if(! url) {
document.getElementById("youtube-url").focus();
return;
} // 입력한 주소 가져오기
$videoId = url.substring(url.lastIndexOf('/') +1);
if(url.indexOf("=") > 0) {
$videoId = url.substring(url.indexOf("=") + 1);
}
// 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: '360',
width: '640',
videoId: $videoId,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
//setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</head>
<body>
<div style="width: 800px; margin: 30px auto; text-align: center;">
<div style="margin: 10px; ">
<input type="text" id="youtube-url">
<button type="button" onclick="play();">확인</button>
</div>
<div id="player"></div>
</div>
</body>
</html>