Youtube plear with bootastrap modal pop-up

<!--HTML-->

<--CLICK BTN-->
{% if (lp.introSectionBtnUrl_text_M and lp.introSectionBtnText_M) %}
				<div class="cc-intro-play">
					<a class="cc-intro-play__link">
						{{ lp.introSectionBtnText_M }}
						<span class="cc-intro-play__icon"></span>
					</a>
				</div>
 {% endif %}
 <--END CLICK BTN-->

<div class="modal fade cc-intro-modal" tabindex="-1" role="dialog" id="cc-intro-modal-id" data-slide-index="0">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-body">

				<button type="button" class="close" data-dismiss="modal" aria-label="Close" modal-slider="close-modal">
					<span aria-hidden="true"></span>
				</button>

				<div class="cc-intro-popup__video-wrapp">
					<div class="cc-intro-popup__placeholder 
								cc-intro-popup__placeholder--visible"></div>
					<div id="cc-intro-popup__video" class="cc-intro-popup__video"></div>
				</div>

			</div>
		</div>
	</div>
</div><!-- modal -->

<!--END HTML-->

<--INIT YOUTUBE API-->
<script>

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

	var player;

	function onYouTubePlayerAPIReady() {
		var options = {
                //ID ВИДЕО
			videoId: '{{ lp.introSectionBtnUrl_text_M }}',
                        
                        ИВЕНТЫ НА КОТОРЫЕ МОЖНО ЦЕПЛЯТЬ ДОПОЛНИТЕЛЬНЫЙ ФУНКЦИОНАЛ
			events: {
				onReady: function() {
					console.log(`==> Video is ready :)`)
				},
				onStateChange: function (state) {
					// video was finished
					if (state.data === 0) {
						showPlaceholder();
					}
				},
			}
		};

		var videoContainer = 'cc-intro-popup__video';
                
		player = new YT.Player(videoContainer, options);
	}
..ДОБАВЛЯЕМ ПЛЕЙСХОЛДЕР НА ВИДЕО 
	function showPlaceholder() {
		const $placeholder = $('.cc-intro-popup__placeholder');
		if (!$placeholder.hasClass('cc-intro-popup__placeholder--visible')) {
			$placeholder.addClass('cc-intro-popup__placeholder--visible');
		}
	}
</script>

..ХЕНДЛЕР ВИДЕО 
/**
		 * On open modal window
		 */
		$(".cc-intro-play__link").on("click", function(e) {
			// show modal window
			$('#cc-intro-modal-id').modal('show');

			// play YT video
			if (window.player && typeof window.player.playVideo === "function") {
				window.player.playVideo();
			}
			
			// hide video placeholder
			hidePlaceholder();
		});



		/**
		 * On close modal window
		 */
		$('#cc-intro-modal-id').on('hidden.bs.modal', function () {
			// stop YT video
			if (window.player && typeof window.player.stopVideo === "function") {
				window.player.stopVideo();
			}
			
			// show placeholder
			showPlaceholder();
		});

		/**
		 * On repeat video
		 */
		$('.cc-intro-popup__placeholder').click(function () {
			// hide video placeholder
			hidePlaceholder();

			// play YT video
			if (window.player && typeof window.player.playVideo === "function") {
				window.player.playVideo();
			}
		});
		
		
		///
		
		function hidePlaceholder() {
			const $placeholder = $('.cc-intro-popup__placeholder');
			if ($placeholder.hasClass('cc-intro-popup__placeholder--visible')) {
				$placeholder.removeClass('cc-intro-popup__placeholder--visible');
			}
		}
		
		function showPlaceholder() {
			const $placeholder = $('.cc-intro-popup__placeholder');
			if (!$placeholder.hasClass('cc-intro-popup__placeholder--visible')) {
				$placeholder.addClass('cc-intro-popup__placeholder--visible');
			}
		}