<div class="video-block" id="player">
    @if($block->typeName != '')
        <h4>{{ $block->typeName }}</h4>
    @endif
    <div class="video-wrapper">
        <div class="video-overlay @if(isset($block->autoPlay) && $block->autoPlay) hide @endif">
            <div class="button">
            </div>
        </div>
        <div id="ytplayer">

            @if($block->youtube == '')
                Fill in video url
            @endif

        </div>
    </div>
</div>

@if($block->youtube != '')
    <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 onYouTubePlayerAPIReady() {

            player = new YT.Player('ytplayer', {
                height: '360',
                width: '640',
                videoId: '{{ $block->youtube }}',
                playerVars: {
                    modestbranding: 1,
                    showinfo: 0,
                    rel: 0,
                    @if(isset($block->autoPlay) && $block->autoPlay)
                    controls: 0
                    @endif
                },
                events: {
                    'onStateChange': onPlayerStateChange,
                    @if(isset($block->autoPlay) && $block->autoPlay)
                    'onReady': onPlayerReady,
                    @endif
                }
            });
        }

        document.querySelector('#player .video-overlay').addEventListener('click', function () {
            player.playVideo();
            this.classList.add('hide');
        }, false);


        function onPlayerStateChange(state) {

            if (state.data === YT.PlayerState.ENDED || state.data === YT.PlayerState.PAUSED) {
                document.querySelector('#player .video-overlay').classList.remove('hide');
            }
        }

        function onPlayerReady(event) {
            event.target.playVideo();
        }
    </script>
@endif