<div class="video-row">
    <div class="video-block">
        @include('layouts.styling.window')
        <div class="video-wrapper">
            <div class="video-overlay" {{ $backgroundClass or '' }} style="background-image: url('https://img.youtube.com/vi/{{ $link or 'D6P6NTFkvtM' }}/hqdefault.jpg');">
                <div class="button">
                    <img alt="youtube-play-buton" src="/img/youtube-play.svg"/>
                </div>
            </div>
            <div id="ytplayer"></div>
            {{--<iframe width="560" height="315" src="https://www.youtube.com/embed/?modestbranding=1&showinfo=0&rel=0"   frameborder="0"  allowfullscreen></iframe>--}}
        </div>
    </div>
    <span class="line"></span>
</div>
<script>
    // Load the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // Replace the 'ytplayer' element with an <iframe> and
    // YouTube player after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {

        document.querySelector('.video-block .video-overlay').addEventListener('click', function(){

            // remove image overlay
            this.classList.add('hide');

            player = new YT.Player('ytplayer', {
                height: '360',
                width: '640',
                videoId: '{{ $link or 'D6P6NTFkvtM' }}',
                playerVars: {
                    modestbranding: 1,
                    showinfo: 0,
                    rel: 0
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });

        }, false);
    }

    function onPlayerReady() {
        // on player ready start the video
        player.playVideo();
    }

    function onPlayerStateChange(state) {

        if(state.data === YT.PlayerState.ENDED){
            // the video is end, do something here.
            document.querySelector('.video-block .video-overlay').classList.remove('hide');
        }
    }
</script>