<section class="services-blocks content-container">
    @foreach(trans('services.steps') as $key => $step)
        <article class="block grid5 {{$step['icon']}}">
            <h3>{{$step['header']}}</h3>

{{--            <div class="video" id="player{{$key}}">--}}

{{--                --}}{{--<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/{{$step['vimeo']}}?color=ffd100&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>--}}


{{--                <div class="video-wrapper">--}}
{{--                    <div class="video-overlay">--}}
{{--                        <div class="button">--}}
{{--                            <img alt="youtube-play-buton" src="/images/structure/youtubeButton.svg"/>--}}
{{--                        </div>--}}
{{--                    </div>--}}


{{--                    <div id="ytplayer-{{$key}}"></div>--}}
{{--                    --}}{{--<iframe width="560" height="315" src="https://www.youtube.com/embed/?modestbranding=1&showinfo=0&rel=0"   frameborder="0"  allowfullscreen></iframe>--}}
{{--                </div>--}}
{{--            </div>--}}

            <p>
                {{$step['text']}}
            </p>

            {{--<div class="overlay-block">--}}
                {{--<img alt="{{$step['header']}}" src="{{$step['image']}}"/>--}}
                {{--<div class="color"></div>--}}
            {{--</div>--}}
        </article>
    @endforeach
    <div class="clear"></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.

                    @foreach(trans('services.steps') as $key => $step)
            var player{{$key}};

            @endforeach

            function onYouTubePlayerAPIReady() {

                @foreach(trans('services.steps') as $key => $step)
                    player{{$key}} = new YT.Player('ytplayer-{{$key}}', {
                    height: 'auto',
                    width: 'auto',
                    host: 'https://www.youtube-nocookie.com',
                    videoId: '{{ $step['youtube'] }}',
                    playerVars: {
                        modestbranding: 1,
                        showinfo: 0,
                        rel: 0,
                        controls: 0
                    },
                    events: {
                        'onStateChange': onPlayerStateChange{{$key}},
                    }
                });
                @endforeach

            }

            @foreach(trans('services.steps') as $key => $step)
            document.querySelector('#player{{$key}} .video-overlay').addEventListener('click', function () {
                player{{$key}}.playVideo();
                this.classList.add('hide');
            }, false);

            function onPlayerStateChange{{$key}}(state) {

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

            function onPlayerReady(event) {
                event.target.playVideo();
            }


        </script>

</section>