<div class="video-row">
    <div class="video-block">
        <?php echo $__env->make('layouts.styling.window', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
        <div class="video-wrapper">
            <div class="video-overlay" <?php echo isset($backgroundClass) ? $backgroundClass : ''; ?> style="background-image: url('https://img.youtube.com/vi/<?php echo isset($link) ? $link : 'D6P6NTFkvtM'; ?>/hqdefault.jpg');">
                <div class="button">
                    <img alt="youtube-play-buton" src="/img/youtube-play.svg"/>
                </div>
            </div>
            <div id="ytplayer"></div>
            <?php /*<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: '<?php echo isset($link) ? $link : '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>