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

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

Javascript

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',
            }
            }
        ]
    });
});