<figure class="c-video-wrapper {marginTop}">
    <div class="c-video" data-video>
        <a class="c-video__link" href="{sourceUri}" data-video-trigger>
            <f:render section="previewImage" arguments="{_all}" />

            <svg class="c-video__icon c-icon"
                 aria-hidden="true"
                 focusable="false">

                <use xlink:href="#play"/>
            </svg>
        </a>
        <iframe class="c-video__iframe"
                data-video-iframe
                data-video-src="{embedUrl}"
                allowfullscreen
                allow="autoplay">
        </iframe>
    </div>
    <f:if condition="{caption}">
        <figcaption>
            {caption -> f:spaceless()}
        </figcaption>
    </f:if>
</figure>

<f:section name="previewImage">
    <f:if condition="{previewImage}">
        <f:then>
            <noscript>
                <img src="{neos.media:uri.image(image: previewImage, width: 1280, height: 720, allowCropping: true)}"
                     alt="{previewImage.title}"
                     class="c-video__image"
                     loading="lazy" />
            </noscript>

            <img data-src="{neos.media:uri.image(image: previewImage, width: 1280, height: 720, allowCropping: true)}"
                 alt="{previewImage.title}"
                 class="c-video__image lazyload" />
        </f:then>
        <f:else>
            <noscript>
                <img src="{fallbackPreviewImage}"
                     alt=""
                     class="c-video__image"
                     loading="lazy" />
            </noscript>

            <img data-src="{fallbackPreviewImage}"
                 alt=""
                 class="c-video__image lazyload" />
        </f:else>
    </f:if>
</f:section>
