{% macro vsl(brightcoveVideoStorage = 'false', brightcoveAccountID, brightcoveVideoID, brightcoveVideoID_mobile = '', isSquare = 'false', isFullScreen = 'false', isFullScreenInline = 'false', hasBigPlayWithText = 'false', customPlay = 'false', placeholder, placeholderMobile = '', placeholderAlt, ID, src, srcMobile, videoThumbnail = '', path, hasControls = 'true', isMutedAndAutoplay = 'false', 'playInLoop' = 'false', playsinline = 'false') %}
    <div class="video 
        {% if isSquare and isSquare == 'true' %} video--square {% endif %} 
        {% if isFullScreen and isFullScreen == 'true' %} video--fullscreen {% endif %} 
        {% if isFullScreenInline and isFullScreenInline == 'true' %} video--fullScreenInline {% endif %} 
        {% if customPlay and customPlay == 'true' %} has-custom-play {% endif %} 
        {% if hasBigPlayWithText and hasBigPlayWithText == 'true' %} video--bigPlayWithText {% endif %}">
        <!-- controlsList="nodownload" disables downloading the video -->
        {% if brightcoveVideoStorage == 'false' %}
            {% if videoThumbnail != '' %}
                <picture>
                    <source type="image/webp" srcset="{{path}}/{{placeholder}}.webp?format=webp">    
                    <source type="image" srcset="{{path}}/{{placeholder}}?format=webp">    
                    <img class="video__placeholder lazyload" data-src="{{path}}/{{placeholder}}" alt="{{placeholderAlt}}">
                </picture>  
                <video-js id='{{ID}}Thumb' class='video-js video-js--default vjs-fluid vjs-big-play-centered'
                    data-setup='{"controls": {{hasControls}}, "preload": "auto" {% if isMutedAndAutoplay and isMutedAndAutoplay == "true" %}, "autoplay": "true", "muted": "true" {% endif %} {% if playInLoop and playInLoop == "true" %}, "loop": "true"{% endif %} }'
                    data-full-video="{{path}}/{{src}}" {% if isFullScreenInline == "true" or playsinline == "true" %} playsinline webkit-playsinline {% endif %} >
                    <source src="{{path}}/{{videoThumbnail}}" type='video/mp4'>
                </video-js>
            {% endif %}

            {% if videoThumbnail == '' %}
                <img class="video__placeholder" src="{{path}}/{{placeholder}}"
                    alt="{{placeholderAlt}}">
                <video-js id='{{ID}}' class='video-js video-js--default vjs-fluid vjs-big-play-centered'
                    poster='{{path}}/{{placeholder}}'
                    data-setup='{"controls": {{hasControls}}, "preload": "none"}'
                    {% if isFullScreenInline == 'true' or playsinline == 'true' %} playsinline webkit-playsinline {% endif %} >
                    <source src="{{path}}/{{src}}" type='video/mp4'>
                </video-js>
            {% endif %}
        {% endif %}

        {% if brightcoveVideoStorage == 'true' %}
            <style>
                :root {
                    --vsl-{{ID}}-placeholder: url({{path}}/{{placeholder}});

                    {% if placeholderMobile != '' %}
                        @media screen and (max-width: 767px) {
                            --vsl-{{ID}}-placeholder: url({{path}}/{{placeholderMobile}});
                        }
                    {% endif %}
                }

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

            <!-- controlsList="nodownload" disables downloading the video -->
            <video-js 
                id='{{ID}}' 
                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 = "830"
                height = "467"
                class='video-js video-js--bc vjs-fluid vjs-big-play-centered'
                {% if isFullScreenInline == 'true' or playsinline == 'true' %} playsinline webkit-playsinline {% endif %} >
            </video-js> 

            <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 playInLoop == '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 %}

        {% if isFullScreen and isFullScreen == 'true' %} <div class="dummyButton"></div> {% endif %}
    </div>
{% endmacro %}