{% macro vsl(displayPlayButton = 'true', 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 %}    
    ">
        <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="{{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 and isMutedAndAutoplay == "true" %}, "muted": true, "autoplay": true{% endif %} {% if playInLoop and playInLoop == "true" %}, "loop": true {% endif %} }'>
            <source src="{{path}}/{{src}}" type='video/mp4'>
        </video-js>
    </div>
{% endmacro %}