{namespace media=Neos\Media\ViewHelpers}
{namespace neos=Neos\Neos\ViewHelpers}

<div class="c-media-player o-container o-container--xs {marginTop}">
    <f:if condition="{media}">
        <f:then>
            <f:if condition="{mediaType} == 'audio'">
                <f:then>
                    <audio class="c-media-player__audio w-full" class="js-player" playsinline controls>
                        <source src="{f:uri.resource(resource: media.resource)}" type="audio/mp3">
                    </audio>
                </f:then>
                <f:else>
                    <link rel="prefetch" as="video" href="{f:uri.resource(resource: media.resource)}" type="video/mp4">
                    <video preload="auto" class="c-media-player__video w-full js-player" poster="{neos.media:uri.image(image: poster, width: 1600, height: 900, allowCropping: true)}" class="js-player" playsinline controls>
                        <source src="{f:uri.resource(resource: media.resource)}" type="video/mp4">
                    </video>
                    <f:if condition="{caption}">
                        <figcaption class="mt-2">
                            {caption -> f:spaceless()}
                        </figcaption>
                    </f:if>
                </f:else>
            </f:if>
        </f:then>
        <f:else>
            <f:if condition="{neos:rendering.inBackend()}">
                <p class="text-center bg-yellow-lightest p-4">
                    Bitte nutzen Sie das Feld <strong>Media</strong> im Inspector um eine neue Mediendatei hochzuladen oder eine vorhandene auszuwählen.
                </p>
            </f:if>
        </f:else>
    </f:if>
</div>