{% macro VSL(title, brightcoveVideoStorage = 'false', brightcoveAccountID, brightcoveVideoID, videoHasCustomPlay, image_placeholder, image_placeholderAlt, videoID, className, mutedAndAutoPlay, videoSrc, path = global.path) %}
    <section id="testimonials" class="vsl">
        <div class="container">
            {% if title != '' %}
                <h3 class="vsl__title">{{title}}</h3>
            {% endif %}

            <div class='video {% if videoHasCustomPlay == "true" %}custom-play{% endif %}'>
                {% if brightcoveVideoStorage == 'false' %}
                    <picture>
                        <source type="image/webp" src="{{path}}/{{image_placeholder}}.webp?format=webp">
                        <source type="image" src="{{path}}/{{image_placeholder}}?format=webp">
                        <img class="video__placeholder" src="{{path}}/{{image_placeholder}}?format=webp" alt="{{image_placeholderAlt}}">
                    </picture>
                {% else %}
                    <style>
                        :root {
                            --vsl-placeholder: url({{path}}/{{image_placeholder}});
                        }

                        .video .video-js--bc .vjs-poster {
                            background-image: var(--vsl-placeholder) !important;
                        }
                    </style>
                {% endif %}

                <!-- controlsList="nodownload" disables downloading the video -->
                <video-js id='{{videoID}}' 
                    {% if brightcoveVideoStorage == 'true' %}
                        data-video-id = "{{brightcoveVideoID}}" 
                        data-account = "{{brightcoveAccountID}}" 
                        data-player = "default" 
                        data-embed = "default"
                        data-application-id = ""
                        controls = ""
                        class = "video-js vjs-fluid vjs-16-9 vjs-big-play-centered video-js--bc"
                        width = "830"
                        height = "467"
                    {% else %}
                        class='video-js vjs-big-play-centered {% if className != "" %} {{className}}  {% endif %}'
                        poster='{{path}}/{{image_placeholder}}'
                        data-setup='{ "controls": true, "preload": "auto" {% if mutedAndAutoPlay == "true" %} , "muted": true, "autoplay":  true {% endif %}}'
                    {% endif %}
                    >
                    {% if brightcoveVideoStorage == 'false' %}
                        <source src="{{path}}/{{videoSrc}}" type='video/mp4'>
                    {% endif %}
                </video-js>
                {% if brightcoveVideoStorage == 'true' %}
                    <script src="https://players.brightcove.net/{{brightcoveAccountID}}/default_default/index.min.js"></script>

                    <script>
                        videojs.getPlayer('{{videoID}}').ready(function() {
                            var {{videoID}} = this;

                            //- mute player if autoplay
                            {% if isMutedAndAutoplay == 'true' %} 
                                {{ID}}.muted(true);
                                {{ID}}.autoplay(true);
                            {% endif %}

                            {% if loop == 'true' %} 
                                {{ID}}.loop(true);
                            {% endif %}
                        })

                        /**
                         * Handle Video instances Play/Pause
                         */
                        // Create array for player IDs
                        var players = [];
                    
                        // +++  Determine the available player IDs +++//
                        for (x = 0; x < Object.keys(videojs.players).length; x++) {
                            // Assign the player name to setPlayer
                            var setPlayer = Object.keys(videojs.players)[x];
                            // Define the ready event for the player
                            videojs.getPlayer(setPlayer).ready(function() {
                                // Assign this player to a variable
                                myPlayer = this;
                                // Assign and event listener for play event
                                myPlayer.on("play", onPlay);
                                // Push the player to the players array
                                players.push(myPlayer);
                            });
                        }
                    
                        // +++ Handle all players' play event +++//
                        function onPlay(e) {
                            // Determine which player the event is coming from
                            var id = e.target.id;
                            // Loop through the array of players
                            for (var i = 0; i < players.length; i++) {
                                // Get the player(s) that did not trigger the play event
                                if (players[i].id() != id && players[i].id() != "prod360VSL") {
                                // Pause the other player(s)
                                videojs(players[i].id()).pause();
                                }
                            }
                        }
                    </script>
                {% endif %}
            </div>
        </div>
    </section>
{% endmacro %}