Slick slider with Youtube video, Vimeo video, Image. Autoplay/Pause on slide change. For example on Shopify Store (liquid tempaltes files)

main-slider.liquid

<section class="main-slider">

    <div id="hero-slider">
        {% for block in section.blocks %}
            {% case block.type %}
                {% when 'image_slide' %}
                    <div>
                        <div class="main-slider__slide main-slider__slide--image" {% if block.settings.image != blank %} style="background-image: url({{ block.settings.image | img_url: "2000x" }})" {% endif %}>
                            <div class="main-slider__content">
                                {% if block.settings.slide_title != blank %}
                                    <h2 class="main-slider__title" style="color: {{ block.settings.text_color }}">{{ block.settings.slide_title }}</h2>
                                {% endif %}

                                {% if block.settings.slide_text != blank %}
                                    <div class="main-slider__text" style="color: {{ block.settings.text_color }}">{{ block.settings.slide_text }}</div>
                                {% endif %}

                                {% if block.settings.button_text != blank and block.settings.button_url != blank %}
                                    <a class="button-3d main-slider__button" href="{{ block.settings.button_url }}"><span class="button-3d__content">{{ block.settings.button_text }}</span></a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                {% when 'video_slide' %}
                    <div data-video-type="{{ block.settings.video.type }}" data-video-start="1">
                        <div class="main-slider__slide main-slider__slide--video">
                            <div class="main-slider__content">
                                {% if block.settings.slide_title != blank %}
                                    <h2 class="main-slider__title" style="color: {{ block.settings.text_color }}">{{ block.settings.slide_title }}</h2>
                                {% endif %}

                                {% if block.settings.slide_text != blank %}
                                    <div class="main-slider__text" style="color: {{ block.settings.text_color }}">{{ block.settings.slide_text }}</div>
                                {% endif %}

                                {% if block.settings.button_text != blank and block.settings.button_url != blank %}
                                    <a class="button-3d main-slider__button" href="{{ block.settings.button_url }}"><span class="button-3d__content">{{ block.settings.button_text }}</span></a>
                                {% endif %}
                            </div>

                            {% if block.settings.video.type == 'youtube' %}
                                {% comment %}
                                    *** for looping video use playlist=[VIDEOID]***
                                {% endcomment %}
                                <iframe
                                        class="embed-player"
                                        src="https://www.youtube.com/embed/{{ block.settings.video.id }}?enablejsapi=1&controls=0&fs=0&iv_load_policy=3&rel=0&showinfo=0&loop=1&start=1&playlist={{ block.settings.video.id }}"
                                        frameborder="0"
                                        allowfullscreen>
                                </iframe>

                            {% elsif block.settings.video.type == 'vimeo' %}
                                <iframe
                                        class="embed-player"
                                        src="https://player.vimeo.com/video/{{ block.settings.video.id }}?title=0&byline=0&portrait=0&autoplay=1&loop=1&controls=0&autohide=1&muted=1"
                                        frameborder="0"
                                        webkitallowfullscreen
                                        mozallowfullscreen
                                        allowfullscreen>
                                </iframe>
                            {% endif %}

                        </div>
                    </div>
            {% endcase %}
        {% endfor %}
    </div>
</section>


<style>

    @media (min-width: 992px) {
        #shopify-section-{{ section.id }} .main-slider__title {
            font-size: {{ section.settings.banner_heading_fz }}px;
        }
    }

    #shopify-section-{{ section.id }} .main-slider__text {
        font-size: {{ section.settings.banner_text_fz }}px;
    }
</style>


{% schema %}
    {
        "name": "Main Slider",
        "settings": [
            {
                "type": "range",
                "id": "banner_heading_fz",
                "min": 30,
                "max": 55,
                "unit": "px",
                "step": 1,
                "label": "Slider heading font size",
                "default": 42
            },
            {
                "type": "range",
                "id": "banner_text_fz",
                "min": 18,
                "max": 30,
                "unit": "px",
                "step": 1,
                "label": "Slider text font size",
                "default": 20
            }
        ],
        "blocks": [
            {
                "type": "image_slide",
                "name": "Image slide",
                "settings": [
                    {
                        "type": "image_picker",
                        "id": "image",
                        "label": "Image"
                    },
                    {
                        "type": "richtext",
                        "id": "slide_title",
                        "label": "Slide heading"
                    },
                    {
                        "type": "richtext",
                        "id": "slide_text",
                        "label": "Slide text"
                    },
                    {
                        "type": "text",
                        "id": "button_text",
                        "label": "Button text"
                    },
                    {
                        "type": "url",
                        "id": "button_url",
                        "label": "Button url"
                    },
                    {
                        "type": "color",
                        "id": "text_color",
                        "label": "Text color",
                        "default": "#000000"
                    }
                ]
            },
            {
                "type": "video_slide",
                "name": "Video slide",
                "settings": [
                    {
                        "type": "video_url",
                        "id": "video",
                        "accept": ["youtube", "vimeo"],
                        "label": "Video",
                        "info": "Use video from Youtube or Vimeo"
                    },
                    {
                        "type": "richtext",
                        "id": "slide_title",
                        "label": "Slide title"
                    },
                    {
                        "type": "richtext",
                        "id": "slide_text",
                        "label": "Slide text"
                    },
                    {
                        "type": "text",
                        "id": "button_text",
                        "label": "Button text"
                    },
                    {
                        "type": "url",
                        "id": "button_url",
                        "label": "Button url"
                    },
                    {
                        "type": "color",
                        "id": "text_color",
                        "label": "Text color",
                        "default": "#000000"
                    }
                ]
            }
        ],
        "presets": [
            {
                "name": "Main slider",
                "category": "Slider"
            }
        ]
    }
{% endschema %}

main-slider.scss

/* 
Breakpoint it's a @media (max-width: {number}) { your styles },
for example:
@include breakpoint(medium) it's equal to

@media (max-width: 1199px) {}

*/

.main-slider {


    .main-slider__slide {
        position: relative;
        height: 640px;

        @include breakpoint(medium) {
            height: 0;
            padding-top: 56.25%;
        }
    }

    .main-slider__slide--image {
        background-repeat: no-repeat;
        background-position: 50% 50%;
        background-size: cover;
    }

    .main-slider__slide--video {

        iframe {
            position: absolute;
            left: 0;
            width: 100%;
            //
            height: calc(100vw * 0.5625);
            top: 50%;
            transform: translateY(-50%);
            //
            pointer-events: none; // prevent click on embed video
        }

        @include breakpoint(medium) {
            iframe {
                height: 100%;
                top: 0;
                transform: translateY(0);
                pointer-events: auto;
            }
        }
    }

    .main-slider__content {
        position: absolute;
        left: 57px;
        top: 100px;
        z-index: 3;
        max-width: 600px;
        width: 100%;

        @include breakpoint(small) {
            top: 70px;
        }

        @include breakpoint(extra-small) {
            display: none;
        }
    }

    .main-slider__title {
        font-family: $marion-regular;
        font-size: 42px;
        color: #000;

        p {
            line-height: 1;
        }

        @include breakpoint(small) {
            font-size: 32px;
        }
    }

    .main-slider__text {
        margin-top: 16px;
        font-family: $nobel-book;
        font-size: 20px;
        font-weight: normal;
        line-height: 1.25;
        letter-spacing: 0.3px;
        color: #0a0a0a;

        +* {
            margin-top: 42px;
        }
    }

    .main-slider__button {}

}

main.js

function initMainSlider() {
    let mainSlider = $('#hero-slider');

    if (!mainSlider.length) {
        return false;
    }

    // POST commands to YouTube or Vimeo API
    function postMessageToPlayer(player, command) {
        if (player == null || command == null) return;
        player.contentWindow.postMessage(JSON.stringify(command), "*");
    }

    // When the slide is changing
    function playPauseVideo(slick, control) {
        var currentSlide, slideType, startTime, player, video;

        currentSlide = slick.find(".slick-current");
        slideType = currentSlide.attr("data-video-type");
        player = currentSlide.find("iframe").get(0);
        startTime = currentSlide.data("video-start");

        if (slideType === "vimeo") {
            switch (control) {
                case "play":
                    // if ((startTime != null && startTime > 0) && !currentSlide.hasClass('started')) {
                    //     currentSlide.addClass('started');
                    //     postMessageToPlayer(player, {
                    //         "method": "setCurrentTime",
                    //         "value": startTime
                    //     });
                    // }
                    console.log('play vimeo');
                    postMessageToPlayer(player, {
                        "method": "setVolume",
                        "value": 0
                    });
                    postMessageToPlayer(player, {
                        "method": "play",
                        "value": 1
                    });
                    break;
                case "pause":
                    postMessageToPlayer(player, {
                        "method": "pause",
                        "value": 1
                    });
                    break;
            }
        } else if (slideType === "youtube") {
            switch (control) {
                case "play":
                    postMessageToPlayer(player, {
                        "event": "command",
                        "func": "mute"
                    });
                    postMessageToPlayer(player, {
                        "event": "command",
                        "func": "playVideo"
                    });
                    break;
                case "pause":
                    postMessageToPlayer(player, {
                        "event": "command",
                        "func": "pauseVideo"
                    });
                    break;
            }
        } else if (slideType === "video") {
            video = currentSlide.children("video").get(0);
            if (video != null) {
                if (control === "play") {
                    video.play();
                } else {
                    video.pause();
                }
            }
        }
    }

    // Initialize
    mainSlider.on("init", function (slick) {
        slick = $(slick.currentTarget);
        setTimeout(function () {
            playPauseVideo(slick, "play");
        }, 1000);
    });
    mainSlider.on("beforeChange", function (event, slick) {
        slick = $(slick.$slider);
        playPauseVideo(slick, "pause");
    });
    mainSlider.on("afterChange", function (event, slick) {
        slick = $(slick.$slider);
        playPauseVideo(slick, "play");
    });

    mainSlider.slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: false,
        infinite: false,
        arrows: false,
        responsive: [{
            breakpoint: 1200,
            settings: {
                dots: true,
                draggable: false,
                swipe: true
            }
        }]
    });
}

@Lysindr can you please help

The first video does not play auto,

if I used youtube autoplay - then the first slider goes to infinite

mainS lider.on("beforeChange", function (event, slick) { slick = $(slick.$slider); playPauseVideo(slick, "play"); });