{% macro vsl(displayPlayButton = 'true', brightcoveVideoStorage = 'false', brightcoveAccountID, brightcoveVideoID, customPlay = 'false', placeholder, alt, ID, src, path, hasControls = 'true', isMutedAndAutoplay = 'false', 'playInLoop' = 'false') %}
    <div class="video 
    {% if transparentPoster and transparentPoster == true %} transparent-poster {% endif %}
    {% if displayPlayButton == 'false' %} hide-play-button {% endif %} 
    {% if customPlay and customPlay == 'true' %} has-custom-play {% endif %} 
    {% if isMutedAndAutoplay and isMutedAndAutoplay == 'true' %} is-muted-autoplay {% endif %}    
    ">
    {% if brightcoveVideoStorage == 'false' %}
    <picture>
        <source type="image/webp" src="{{path}}/{{placeholder}}.webp?format=webp">
        <source type="image" src="{{path}}/{{placeholder}}?format=webp">
        <img class="video__placeholder" src="{{path}}/{{placeholder}}?format=webp" alt="{{alt}}">
    </picture>
{% else %}
    <style>
        :root {
            --vsl-{{ID}}-placeholder: url({{path}}/{{placeholder}});
        }

        .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}}" 
            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 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();
                    }
                }
            }
        </script>
    {% endif %}
    </div>
{% endmacro %}