{% if module.params.title is not empty and module.params.title_tag is not empty %}
    <{{ module.params.title_tag }} class="module-title">
        {{ module.params.title }}
    </{{ module.params.title_tag }}>
{% endif %}

<section id="slider-{{ module.id }}" class="video-slider">
    {% for i, video in videos %}
        <div class="item youtube" data-player="player{{ i }}">
            {# <iframe class="embed-player" width="640" height="360" src="https://www.youtube.com/embed/{{ video.path }}" frameborder="0" allowfullscreen></iframe> #}
            <div id="youtube-player-{{ module.id }}-{{ video.id }}"></div>
        </div>
    {% endfor %}
</section>

{% if module.params.btn_text and module.params.btn_link %}
<p class="module-more-actions">
    <a class="btn btn-pelorous" href="{{ module.params.btn_link }}">
        {{ module.params.btn_text }}
    </a>
</p>
{% endif %}

<script type="text/javascript">
    {% for i, video in videos %}
    var player{{ i }};
    {% endfor %}

    function onYouTubeIframeAPIReady() {
        {% for i, video in videos %}
        player{{ i }} = new YT.Player('youtube-player-{{ module.id }}-{{ video.id }}', {
            height: '404',
            width: '718',
            videoId: '{{ video.path|split("?")|first }}',
            playerVars : {
                rel: '0'
            }
        });
        {% endfor %}
    } 

    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>