{% macro vsl(customPlay = 'false', brightcoveVideoStorage = 'false', brightcoveAccountID, brightcoveVideoID, brightcoveVideoID_mobile, hidePlay = 'true', placeholder, placeholder_desktop, alt, ID, src, path, hasControls = 'true', isMutedAndAutoplay = 'false', isFullScreenInlineDesktop, isFullScreenInlineMobile, customProgressBar = 'false', isSquaredMobile = 'false') %}
    <div class="video 
    {% if hasControls == 'true' %} has-controls {% endif %} 
    {% if customPlay == 'true' %} has-custom-play {% endif %} 
    {% if hidePlay == 'true' %} hide-play {% endif %} 
    {% if isMutedAndAutoplay == 'true' %} is-muted-autoplay {% endif %}
    {% if isFullScreenInlineDesktop == 'true' or isFullScreenInlineMobile == 'true' %} video--fullScreenInline {% endif %}
    {% if isSquaredMobile == 'true' %} video--mobileSquared {% endif %}
    ">
        {% if brightcoveVideoStorage == 'false' %}
            <picture>
                <source type="image/webp" src="{{path}}/{{placeholder_desktop}}.webp?format=webp">
                <source type="image" src="{{path}}/{{placeholder_desktop}}?format=webp">
                <img class="video__placeholder" src="{{path}}/{{placeholder_desktop}}?format=webp" alt="{{alt}}">
            </picture>
        {% else %}
            <style>
                :root {
                    --vsl-{{ID}}-placeholder: url({{path}}/{{placeholder_desktop}});
                }

                .video #{{ID}}.video-js--bc .vjs-poster {
                    background-image: var(--vsl-{{ID}}-placeholder) !important;
                }
            </style>
        {% endif %}
            
        <!-- controlsList="nodownload" disables downloading the video -->
        <video-js id='{{ID}}' 
            {% if brightcoveVideoStorage == 'true' %}
                data-video-id = "{{brightcoveVideoID}}"
                {% if brightcoveVideoID_mobile != "" %}
                    data-video-id-mobile = "{{brightcoveVideoID_mobile}}"
                {% endif %}
                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 = "768"
                height = "432"
            {% else %}
                class='video-js vjs-big-play-centered video-js--default'
                controlsList="nodownload"
                poster='{{path}}/{{placeholder}}'
                data-setup='{ "controls": {{hasControls}}, "preload": "auto" {% if mutedAndAutoPlay == "true" %} , "muted": true, "autoplay":  true {% endif %}}'
            {% endif %} 
            {% if isFullScreenInlineMobile == 'true' %}
                playsinline webkit-playsinline
            {% endif %}>
            {% if brightcoveVideoStorage == 'false' %}
                <source src="{{path}}/{{src}}" 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('{{ID}}').ready(function() {
                    var {{ID}} = 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) {
                        // Pause the other player(s)
                        videojs(players[i].id()).pause();
                        }
                    }
                }

                {% if customProgressBar == 'true' %} 
                    let customProgressBar = true   
                {% endif %}
            </script>
        {% endif %}
    </div>
{% endmacro %}