{% macro vsl(customPlay = 'false', hidePlay = 'true', placeholder, alt, ID, src, path, hasControls = 'true', isMutedAndAutoplay = 'false') %}
    <div class="video 
    {% if customPlay == 'true' %} has-custom-play {% endif %} 
    {% if hidePlay == 'true' %} hide-play {% endif %} 
    {% if isMutedAndAutoplay == 'true' %} is-muted-autoplay {% endif %}
    ">
    <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>
    
        <!-- controlsList="nodownload" disables downloading the video -->
        <video-js id='{{ID}}' class='video-js vjs-fluid vjs-big-play-centered' controlsList="nodownload"
            poster='{{path}}/{{placeholder}}'
            data-setup='{"preload": "auto", "controls": {{hasControls}} 
                        {% if isMutedAndAutoplay == "true" %} , "muted": true, "autoplay": true {% endif %} }'>
            <source src="{{path}}/{{src}}" type='video/mp4'>
        </video-js>
    </div>
{% endmacro %}