{% macro vsl(brightcoveVideoStorage = 'false', brightcoveAccountID, brightcoveVideoID, brightcoveVideoID_mobile, brightcoveVideoID_mobile = '', hidePlayButton = 'false', customPlay = 'false', placeholder, placeholder_mobile, alt, ID, src, srcMobile, path, hasControls = 'true', isMutedAndAutoplay = 'false', 'playInLoop' = 'false', playsinline = 'false', isFullScreenInlineDesktop, isFullScreenInlineMobile, hasVideoPlayingPlaceholder = 'false') %}
    <div class="video 
    {% if transparentPoster and transparentPoster == true %} transparent-poster {% endif %}
    {% if hidePlayButton == 'true' %} hide-playButton {% endif %} 
    {% if customPlay and customPlay == 'true' %} has-custom-play {% endif %} 
    {% if isMutedAndAutoplay and isMutedAndAutoplay == 'true' %} is-muted-autoplay {% endif %}   
    {% if isFullScreenInlineDesktop == 'true' or isFullScreenInlineMobile == 'true' %} video--fullScreenInline {% endif %} {% if hasVideoPlayingPlaceholder == 'true' %}video--playsinline{% endif %}
    ">
        {% if placeholder != '' %}
            {% if brightcoveVideoStorage == 'false' %}
                {% if 'gif' in placeholder or 'gif' in placeholder_mobile %}
                    <picture>   
                        <source media="(max-width: 767px)" type="image" srcset="{{path}}/{{placeholder_mobile}}">  
                        <source media="(min-width: 768px)" type="image" srcset="{{path}}/{{placeholder}}">    
                        <img class="video__placeholder lazyload" data-src="{{path}}/{{placeholder}}" alt="{{alt}}">
                    </picture>   
                {% else %}
                    <picture>
                        <source media="(max-width: 767px)" type="image/webp" srcset="{{path}}/{{placeholder_mobile}}.webp?format=webp">    
                        <source media="(max-width: 767px)" type="image" srcset="{{path}}/{{placeholder_mobile}}?format=webp">
                        <source media="(min-width: 768px)" type="image/webp" srcset="{{path}}/{{placeholder}}.webp?format=webp">    
                        <source media="(min-width: 768px)" type="image" srcset="{{path}}/{{placeholder}}?format=webp">    
                        <img class="video__placeholder lazyload" data-src="{{path}}/{{placeholder}}?format=webp" alt="{{alt}}">
                    </picture>                
                {% endif %}
            {% else %}
                <style>
                    :root {                
                        @media (max-width: 767px) and (orientation: portrait) and (pointer: coarse) {
                            --vsl-{{ID}}-placeholder: url({{path}}/{{placeholder_mobile}});
                        }

                        --vsl-{{ID}}-placeholder: url({{path}}/{{placeholder}});
                    }

                    .video #{{ID}}.video-js--bc .vjs-poster {
                        background-image: var(--vsl-{{ID}}-placeholder) !important;
                    }
                </style>
            {% endif %}
        {% endif %}
        
            
        <!-- 
            By the time of BrightCove migration, index-3575 (Hero Video with desktop and mobile src) is already out of scope
            Support of different video sources based on screen size was not implemented.
         -->
        <!-- 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}}"
                {# % if brightcoveVideoID_mobile != "" %}
                    data-account-desktop = {{brightcoveAccountID}}
                    data-account-mobile = {{brightcoveVideoID_mobile}}
                {% endif % #}
                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-fluid vjs-big-play-centered video-js--default {% if className != "" %} {{className}} {% endif %}'
                {% if placeholder != '' %}
                    poster='{{path}}/{{placeholder}}'
                {% endif %}
                data-setup='{"preload": "auto", "controls": {{hasControls}} 
                            {% if (isMutedAndAutoplay and isMutedAndAutoplay == "true") or (hasVideoPlayingPlaceholder == "true" and isFullScreenInlineMobile == "false") %}, "muted": true, "autoplay": true{% endif %} {% if (playInLoop and playInLoop == "true") or (hasVideoPlayingPlaceholder == "true" and isFullScreenInlineMobile == "false") %}, "loop": true {% endif %} {% if (playsinline and playsinline == "true") or (hasVideoPlayingPlaceholder == "true" and isFullScreenInlineMobile == "false") %}, "playsinline": true {% endif %}}'
            {% endif %}
            {% if hasVideoPlayingPlaceholder == "true" or isFullScreenInlineMobile == 'true' %}
                playsinline webkit-playsinline
            {% endif %}
        >
            {% if brightcoveVideoStorage == 'false' %}
                <source type='video/mp4'
                    {% if src != '' %}
                        src="{{path}}/{{src}}"
                    {% elif srcMobile != '' %}
                        src="{{path}}/{{srcMobile}}"
                    {% endif %}
                    
                    {% if src != srcMobile %}
                        {% if srcMobile == '' %}
                            data-src-mobile="{{path}}/{{src}}"
                            data-src-desktop="{{path}}/{{src}}"
                        {% elif src == '' %}
                            data-src-mobile="{{path}}/{{srcMobile}}" 
                            data-src-desktop="{{path}}/{{srcMobile}}" 
                        {% else %}
                            data-src-mobile="{{path}}/{{srcMobile}}"
                            data-src-desktop="{{path}}/{{src}}" 
                        {% endif %}
                    {% endif %}
                >
            {% 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' or hasVideoPlayingPlaceholder == 'true' %} 
                        {{ID}}.muted(true);
                        {{ID}}.autoplay(true);
                    {% endif %}

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

                    {% if playsinline == 'true' or (hasVideoPlayingPlaceholder == 'true' and isFullScreenInlineMobile == 'false') %} 
                        {{ID}}.playsinline(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>
{% endmacro %}