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