Show preview of youtube before clicking; no cookies before playing. - Bolt

record.twig

{% if 'youtube' in record.video.url %}
            {% set embedurl = 'https://www.youtube-nocookie.com/embed/' ~ record.video.url|split('=')|last ~ '?feature=oembed&rel=0&autoplay=1' %}
        {% elseif 'youtu.be' in record.video.url %}
            {% set embedurl = 'https://www.youtube-nocookie.com/embed/' ~ record.video.url|split('/')|last ~ '?feature=oembed&rel=0&autoplay=1' %}
        {% elseif 'vimeo' in record.video.url %}
            {% set embedurl = 'https://player.vimeo.com/video/' ~ record.video.url|split('/')|last ~'?autoplay=1'  %}
        {% else %}
            {% set embedurl = '[todo-else]' %}
        {% endif %}
        
<div class="visual video responsive-video" data-embed-url="{{ embedurl|raw }}">
    <a href="{{ record.video.url }}" aria-label= "speel video.">
        <div class="playbutton"></div>
         <img
              src="{{ record.video.thumbnail|replace({ 'hqdefault': 'maxresdefault' }) }}" //de maxresdefault is er niet altijd, dus de replace mag eventueel weg.
              alt="Still uit de video '{{ record.video.title }}'"
              title="{{ record.video.title }}" />
     </a>
</div>

script.js

//  Start videos in page after click
    $(".video a").on("click", function(e) {
        var vid = $(this).parent(),
        vid_embed = vid.attr("data-embed-url");

        vid.html(
        '<iframe src="' +
            vid_embed +
            '" frameborder="0" allow="encrypted-media" allowfullscreen="true"></iframe>'
        );

        e.preventDefault();
    });

style.scss

/**
 * Styles for 'responsive video embeds'
 */

.responsive-video, .oembed-provider-vimeo, .oembed-provider-youtube {
    height: 0;
    padding-top: 25px;
    padding-bottom: 67.5%;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}
.responsive-video.vimeo {
    padding-top: 0;
}
.responsive-video.widescreen {
    padding-bottom: 57.25%;
}
.responsive-video embed, .responsive-video iframe, .responsive-video object, .responsive-video video,
.oembed-provider-vimeo iframe, .embed-provider-vimeo embed,
.oembed-provider-youtube iframe, .embed-provider-youtube embed {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}
@media (max-width: 767px) {
    .responsive-video {
        padding-top: 0;
  }
}

.playbutton{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1rem 0 1rem 2rem;
    border-color: transparent transparent transparent #ffffff;

    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1rem 0 0 0;
}

.visual.video {
  background: #000; //fill possible room around video with black void
    img {
        width: 100%;
    }
}