{% block element_youtube_video %}
{% set config = element.fieldConfig.elements %}
{% set elementData = element.data %}
{% if config.advancedPrivacyMode.value == true %}
{% set videoUrl = 'https://www.youtube-nocookie.com/embed/' %}
{% else %}
{% set videoUrl = 'https://www.youtube.com/embed/' %}
{% endif %}
{% set videoUrl = videoUrl ~ config.videoID.value ~ '?' ~ 'rel=0' ~ '&' %}
{% if config.autoPlay.value %}
{% set videoUrl = videoUrl ~ 'autoplay=1' ~ '&' %}
{% endif %}
{% if config.loop.value %}
{% set videoUrl = videoUrl ~ 'loop=1' ~ '&' ~ 'playlist=' ~ config.videoID.value ~ '&' %}
{% endif %}
{% if config.showControls.value == false %}
{% set videoUrl = videoUrl ~ 'controls=0' ~ '&' %}
{% endif %}
{% if config.start.value > 0 %}
{% set videoUrl = videoUrl ~ 'start=' ~ config.start.value ~ '&' %}
{% endif %}
{% if config.end.value == not null %}
{% set videoUrl = videoUrl ~ 'end=' ~ config.end.value ~ '&' %}
{% endif %}
{% set videoUrl = videoUrl ~ 'disablekb=1' %}
<div class="cms-element-youtube-video w-full ratio ratio_16x9">
{% block element_youtube_video_inner %}
{% set iframeClass = 'cms-element-youtube-video__video' %}
{% if config.needsConfirmation.value == false %}
<iframe class="{{ iframeClass }} w-full h-full"
src="{{ videoUrl }}">
</iframe>
{% else %}
{% set pluginConfiguration = {
videoUrl: videoUrl,
iframeClasses: [ iframeClass ],
btnClasses: [ 'btn', 'btn-outline-secondary' ],
backdropClasses: [ 'cms-element-youtube-video__backdrop' ],
confirmButtonText: 'component.cms.vimeo.acceptButtonLabel'|trans,
overlayText: 'component.cms.vimeo.privacyNotice'|trans({
'%url%': path('frontend.cms.page',{ id: config('core.basicInformation.privacyPage') }),
'%platform%': 'YouTube'
})|raw
} %}
{% block element_youtube_video_placeholder %}
<div class="cms-element-youtube-video__placeholder"
data-cms-gdpr-video-element="true"
data-cms-gdpr-video-element-options="{{ pluginConfiguration|json_encode }}">
{% if elementData.media %}
{% sw_thumbnails 'cms-element-youtube-video__placeholder' with {
media: elementData.media
} %}
{% endif %}
</div>
{% endblock %}
{% endif %}
{% endblock %}
</div>
{% endblock %}