Slick Slider with youtube videos not showing first one

I have a page with a slick slider that each slide has a iframe of a youtube embed video. For some reason the first video doesn’t show up. If I change the video to another location it shows and if I change to a video that works on another slider, it stops working if it’s in the first position.
Could you help me figure it out?

PHP Loop

            <div class="slider-card-carrossel-off">
                <video controls>
                    <source src="<?php echo $video_link_carrossel_off; ?>" type="video/mp4">
                </video>
            </div>
        <?php endif; ?>

Javascript

```<script>
    jQuery(function(){
        jQuery('.slider-carrossel-off').slick({
            slidesToShow: 1,
            arrows: true,
            dots: false,
            centerMode: true,
            centerPadding: '300px',
            nextArrow: '<button type="button" class="slick-next"><i class="ge-setadireita"></i></button>',
            prevArrow: '<button type="button" class="slick-prev"><i class="ge-setaesquerda"></i></button>',
            responsive: [
                {
                breakpoint: 1399,
                settings: {
                    centerPadding: '200px',
                }
                },
                {
                breakpoint: 991,
                settings: {
                    centerPadding: '100px',
                }
                },
                {
                breakpoint: 767,
                settings: {
                    centerPadding: '50px',
                }
                }
            ]
        });
    });
    </script>
ass