(Squarespace) How to change Image in Video Page with Video

[tuanphan]

To change image in Video Page with Video, like this.

The code works with Vimeo Video Only

#1. First, use this code to Custom CSS

/* Video page */
.video-wrapper {
        position: relative;
        width: 100%;
        height: 300px;
        overflow: hidden;
        border-radius: 8px;
    }
    .video-wrapper iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
    .grid-image-wrapper {
        transition: opacity 0.3s ease;
    }
    .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
    }

#2. Use this code to Code Injection > Footer (or Video Page Header Injection)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('.lessons-image').on('click', function(e) {
            e.preventDefault();
            
            const $clickedLink = $(this);
            const videoUrl = $clickedLink.attr('href');
            const $gridItem = $clickedLink.closest('.grid-item');
            const $imageWrapper = $gridItem.find('.grid-image-wrapper');
            
            $imageWrapper.append('<div class="loading-overlay">Loading video...</div>');
            
            $.get(videoUrl + '?format=json')
                .done(function(data) {
                    if (data.item && data.item.items && data.item.items[0] && data.item.items[0].oembed) {
                        let oembedHtml = data.item.items[0].oembed.html;
                        
                        if (oembedHtml) {
                            oembedHtml = oembedHtml.replace(/width="\d+"/, 'width="100%"');
                            oembedHtml = oembedHtml.replace(/height="\d+"/, 'height="200"');
                            
                            if (oembedHtml.includes('vimeo.com')) {
                                oembedHtml = oembedHtml.replace('?', '?autoplay=1&');
                            } else if (oembedHtml.includes('youtube.com') || oembedHtml.includes('youtu.be')) {
                                oembedHtml = oembedHtml.replace('?', '?autoplay=1&');
                            }
                            
                            const $videoWrapper = $('<div class="video-wrapper"></div>');
                            $videoWrapper.html(oembedHtml);
                            
                            $imageWrapper.fadeOut(300, function() {
                                $(this).replaceWith($videoWrapper);
                                $videoWrapper.fadeIn(300);
                                
                                setTimeout(function() {
                                    const $iframe = $videoWrapper.find('iframe');
                                    if ($iframe.length) {
                                        $iframe[0].src = $iframe[0].src;
                                    }
                                }, 100);
                            });
                        }
                    }
                })
                .fail(function() {
                    $gridItem.find('.loading-overlay').remove();
                    alert('Failed to load video');
                });
        });
    });
</script>