<style>

.bbs-cma-video-control-btn{position:relative;width:100%;clear: both;margin:5px 0;text-align:center;}

.bbs-cma-video-control-btn .btn{background-color:#202023;color:#fff;}

.bbs-cma-video-control-btn .btn_youtube_player{}

.bbs-cma-video-control-btn .btn_youtube_pause{}

.bbs-cma-video-control-btn .btn_youtube_stop{}

.bbs-cma-video-control-btn .btn_youtube_volume_mute{}


.bbs-cma-video-control-btn .span_range_view_sound_volume{position:relative;float:right;}

.bbs-cma-video-control-btn .span_range_view_sound_volume .rvsv_txt{}

.bbs-cma-video-control-btn .span_range_view_sound_volume .range_view_sound_volume{}

</style>

<div class="bbs-cma-video-container">

	<iframe id="youtube_youtube_62" title="[장편소설오디오북] 흔적 / 사랑" class="youtube-player" width="700" height="450" src="https://www.youtube.com/embed/VXSFUb7MLEc?rel=0&autoplay=1&enablejsapi=1" frameborder="0" style="margin:10px 0" allow="autoplay; fullscreen" allowfullscreen=""></iframe>

</div>


<div class="bbs-cma-video-control-btn">

	<button type="button" class="btn btn_youtube_player" onclick="viewPlayVideo(event);">

		<i class="fas fa-play" aria-hidden="true"></i> <span class="span_btn_video_txt txt_youtube_player">재생</span>

	</button>

	

	<button type="button" class="btn btn_youtube_pause" onclick="viewPauseVideo();">

		<i class="fas fa-pause" aria-hidden="true"></i> <span class="span_btn_video_txt txt_youtube_pause">일시정지</span>

	</button>

	

	<button type="button" class="btn btn_youtube_stop" onclick="viewStopVideo();">

		<i class="fas fa-stop" aria-hidden="true"></i> <span class="span_btn_video_txt txt_youtube_stop">종료</span>

	</button>

	

	<button type="button" class="btn btn_youtube_volume_mute" onclick="viewVolumeMute(this);" data-y_mute="음소거 해제" data-n_mute="음소거">

		<i class="fas fa-volume-mute" aria-hidden="true"></i> <span class="span_btn_video_txt txt_volume_mute">음소거</span>

	</button>


	<span class="span_range_view_sound_volume">

		<span class="rvsv_txt">볼륨 : </span>

		<input type="range" value="50" min="0" max="100" class="range_view_sound_volume" onchange="viewSoundControl(this.value);">

	<span>

</div>

<script>var view_youtube_player_obj_id = 'youtube_youtube_62';</script>

<script>

	var view_youtube_tag = document.createElement("script");

	view_youtube_tag.src = "https://www.youtube.com/iframe_api";

	var firstScriptTag = document.getElementsByTagName('script')[0];

	firstScriptTag.parentNode.insertBefore(view_youtube_tag, firstScriptTag);


	// 영상의 정보를 담을 view_youtube_player 전역 변수 선언

	var view_youtube_player = "";


	// 영상의 세부정보를 playser 변수에 담는다.

	function onYouTubeIframeAPIReady() {

		view_youtube_player = new YT.Player(view_youtube_player_obj_id, {

			/*  <iframe> 태그 지정시 필요없음

			  height : '450'

			, width : '800'

			, videoId : 'E8AYyhPHRDc'

			, playerVars: {

			'autoplay': 1 // 자동재생

			   , 'cc_load_policy' : 0    // 자막 0 : on, 1 : off

			   , 'controls': 0 // 동영상 플레이어 컨트롤 표기

			   , 'disablekb' : 0  // 키보드 컨트롤 사용 중지


			}, */

			events: {

				'onReady': onPlayerReady,

				'onStateChange': onPlayerStateChange

			}

		});

	}


	function onPlayerReady(event) {

		event.target.playVideo();

	}


	// 5. The API calls this function when the player's state changes.

	//    The function indicates that when playing a video (state=1),

	//    the player should play for six seconds and then stop.

	var vew_youtube_done = false;

	function onPlayerStateChange(event) {

		if (event.data == YT.PlayerState.PLAYING && !vew_youtube_done) {

			setTimeout(viewStopVideo, 6000);

			vew_youtube_done = true;

		}

	}


	// 재생

	function viewPlayVideo(event) {

		view_youtube_player.playVideo();

	}


	// 일시정지

	function viewPauseVideo() {

		view_youtube_player.pauseVideo();

	}


	// 종료

	function viewStopVideo() {

		view_youtube_player.stopVideo();

	}


	// 음소거 On / Off

	function viewVolumeMute(sThis) {

		var y_mute = $(sThis).attr('data-y_mute'); // 음소거 해제

		var n_mute = $(sThis).attr('data-n_mute'); // 음소거


		if(view_youtube_player.isMuted() == true) {// 음소거

			view_youtube_player.unMute();

			$(sThis).find('span.txt_volume_mute').html(n_mute);

			$(sThis).attr('title', n_mute);

			$(sThis).find('i.fas').removeClass('fa-volume-off');

			$(sThis).find('i.fas').addClass('fa-volume-mute');

		} else if(view_youtube_player.isMuted() == false) { // 음소거 해제

			view_youtube_player.mute();

			$(sThis).find('span.txt_volume_mute').html(y_mute);

			$(sThis).attr('title', y_mute);

			$(sThis).find('i.fas').removeClass('fa-volume-mute');

			$(sThis).find('i.fas').addClass('fa-volume-off');

		}

	}


	// 볼륨 조절

	function viewSoundControl(number) {

		view_youtube_player.setVolume(number);

	}


	// HTML 문서가 모두 준비되면

	/*

	jQuery(document).ready(function () {

		onYouTubeIframeAPIReady();

	});

	*/


	$(function(e) {

		onYouTubeIframeAPIReady();

	});

</script>