<section class="services-blocks content-container">
    <?php foreach(trans('services.steps') as $key => $step): ?>
        <article class="block grid5 <?php echo $step['icon']; ?>">
            <h3><?php echo $step['header']; ?></h3>

<?php /*            <div class="video" id="player<?php echo $key; ?>">*/ ?>

<?php /*                */ ?><?php /*<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/<?php echo $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>*/ ?>


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


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

            <p>
                <?php echo $step['text']; ?>

            </p>

            <?php /*<div class="overlay-block">*/ ?>
                <?php /*<img alt="<?php echo $step['header']; ?>" src="<?php echo $step['image']; ?>"/>*/ ?>
                <?php /*<div class="color"></div>*/ ?>
            <?php /*</div>*/ ?>
        </article>
    <?php 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.

                    <?php foreach(trans('services.steps') as $key => $step): ?>
            var player<?php echo $key; ?>;

            <?php endforeach; ?>

            function onYouTubePlayerAPIReady() {

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

            }

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

            function onPlayerStateChange<?php echo $key; ?>(state) {

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

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


        </script>

</section>