<figure class="c-video-wrapper">
    <div class="c-video" data-video>
        <a class="c-video__link" {f:if(condition: linkTitle, then: 'title="{linkTitle}"', else: 'title="Video laden"')} href="{sourceUri}" data-video-trigger>
            <f:render section="previewImage" arguments="{_all}" />

            <svg class="c-video__icon c-icon">
                <use xlink:href="#play"></use>
            </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>
            <img
                class="c-video__image"
                src="{neos.media:uri.image(image: previewImage)}"
                alt="{alternativeText}">

        </f:then>
        <f:else>
            <img
                class="c-video__image"
                src="{fallbackPreviewImage}"
                alt="video preview image">

        </f:else>
    </f:if>
</f:section>
