유튜브 동영상 유효성 검사하기

보통 사이트에 유튜브를 아래와 같이 임베디드해서 사용하는 경우가 많다

. <iframe src="https://www.youtube.com/embed/id" frameborder="0" allowfullscreen style="left:0;width:100%;height:100%;"></iframe>

문제는 이렇게 가져다 사용할 경우 해당 영상이 삭제되거나 문제가 발생했을 경우 

오류 메세지가 그대로 노출되고 오류가 있는지 몰라 대처하기 힘들다는거다

해당 문제를 구글링 해보니 이럴 경우에 사용할 수 있는 소스를 발견했다.

영상을 로드해서 정상이면 유튜브를 플레이 준비하고 비정상이면 본인이 원하는 액션을 주면된다.

소스는 아래와 같다.

<div id="player"></div>
<!-- 유튜브 유효성 검사 -->
<script>
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: "YOUTUBE_ID",
events: {
'onReady': onPlayerReady
}
});
  }

function onPlayerReady(event){
const videoData = player.getVideoData();
if (!videoData || !videoData.video_id) {
console.log('유튜브 영상이 유효하지 않습니다.');
//유튜브 영상 오류시 처리넣기
}
}
</script>