{% macro vsl(brightcoveVideoStorage = 'false', brightcoveAccountID, brightcoveVideoID, brightcoveVideoID_mobile, customPlay = 'false', showPlayButton = 'true', placeholder, placeholder_mobile = '', alt, ID, src, path, hasControls = 'true', isMutedAndAutoplay = 'false', isFullScreenInlineDesktop, isFullScreenInlineMobile) %}
    <style>
        :root {
            --vsl-placeholder: url({{path}}/{{placeholder}});
        }

        {% if brightcoveVideoStorage == 'true' and placeholder_mobile != '' %}
            @media screen and (max-width: 767px) {
                :root {
                    --vsl-placeholder: url({{path}}/{{placeholder_mobile}});
                }
            }
        {% endif %}
    </style>

    <div class="video 
    {% if customPlay == 'true' %} has-custom-play {% endif %} 
    {% if showPlayButton == 'false' %} hide-play {% endif %} 
    {% if isMutedAndAutoplay == 'true' %} is-muted-autoplay {% endif %}
    {% if isFullScreenInlineDesktop == 'true' or isFullScreenInlineMobile == 'true' %} video--fullScreenInline {% endif %}
    ">
        {% if brightcoveVideoStorage == 'false' %}
            {% if '.gif' in placeholder %}
                <img class="video__placeholder" src="{{path}}/{{placeholder}}" alt="{{alt}}">
            {% else %}
                <picture>
                    <source type="image/webp" srcset="{{path}}/{{placeholder}}.webp?format=webp">
                    <source type="image" srcset="{{path}}/{{placeholder}}?format=webp">
                    <img class="video__placeholder" src="{{path}}/{{placeholder}}?format=webp" alt="{{alt}}">
                </picture>
            {% endif %}
        {% 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 = "830"
                height = "467"
            {% else %}
                class='video-js vjs-fluid vjs-16-9 vjs-big-play-centered video-js--default' 
                controlsList="nodownload"
                poster='{{path}}/{{placeholder}}'
                data-setup='{"preload": "auto", "controls": {{hasControls}}{% if isMutedAndAutoplay == "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
                // {{ID}}.muted(true);
                
                //- video can play only after metadata is loaded
                // {{ID}}.on('loadedmetadata', function() {
                //     {{ID}}.play();
                // })
            })
        </script>
        {% endif %}
    </div>
{% endmacro %}