Remove Featured Image from Vimeo Video Block on Mobile

[tuanphan]

To remove featured image from Vimeo Video Block on Mobile.

You can use this code to Code Injection > Footer

<script>
// @tuanphan - extract iframe from video
// Function to check if device is mobile
function isMobileDevice() {
    return (window.innerWidth <= 768) || // Check viewport width
           /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); // Check user agent
}
// Function to extract and show iframe
function extractAndShowIframe() {
    // Only proceed if it's a mobile device
    if (!isMobileDevice()) {
        return; // Exit if not mobile
    }
    // Select video wrapper
    const videoWrapper = document.querySelector('.sqs-video-wrapper');
    
    if (videoWrapper) {
        // Get iframe HTML from data-html attribute
        const iframeHtml = videoWrapper.getAttribute('data-html');
        
        // Create a temporary div to parse the HTML string
        const temp = document.createElement('div');
        temp.innerHTML = iframeHtml;
        
        // Get the iframe element
        const iframe = temp.querySelector('iframe');
        
        if (iframe) {
            // Remove the intrinsic div and overlay
            videoWrapper.innerHTML = '';
            
            // Add the iframe directly to the wrapper
            videoWrapper.appendChild(iframe);
            
            // Optional: Adjust iframe styles if needed
            iframe.style.width = '100%';
            iframe.style.height = '100%';
        }
    }
}
// Run the function when page loads
document.addEventListener('DOMContentLoaded', extractAndShowIframe);
// Optional: Also run when window is resized
window.addEventListener('resize', extractAndShowIframe);
</script>