Services Plugins FAQs

My video doesnt play... I using Wonderful Video & Image Slider Plugin for Bubble

Hello! I’m using the Wonderful Video & Image Slider Plugin for Bubble Plugin. I have set it up to swipe through 3 videos, but when viewing on an iPhone, the first video doesn’t display properly when the page is first loaded. The video area turns white. When I swipe to the second video, it displays without any issues, and if I swipe back to the first video, it shows correctly.

This issue only occurs on smartphones (I’ve tested it on an iPhone), and does not happen on a desktop. Has anyone experienced the same issue, and how did you resolve it?

Hi @satoko.toriumi ,

Thank you for reaching out! :pray:

This kind of behavior, where the first video doesn’t display correctly on initial load but works fine when swiping or returning to it, is often linked to mobile-specific rendering issues or asynchronous loading behavior. Here are a few suggestions that could help resolve the issue:

A Few Ideas to Try:

  1. Ensure Proper Element Sizing
    Sometimes, mobile browsers handle element sizing differently than desktops, especially if there’s dynamic content like videos involved. Try setting a fixed height for the video container to avoid any rendering issues on page load. This can help ensure the container is initialized properly on mobile devices.

  2. Test with “Autoplay” Disabled
    If autoplay is enabled for the first video, it can sometimes conflict with the video loading process on mobile devices. Try disabling autoplay to see if that resolves the issue. Alternatively, you can also add a small delay before the video starts playing.

Additional Information:

To help us further investigate, could you provide more details on:

  • Are you using any custom settings, like autoplay, or is the video size dynamic?
  • Have you tried testing the setup on other smartphones (e.g., Android)?

Additionally, could you please check our demo page to see if the issue persists there? Here’s the link:
:point_right: Wonderful Video & Image Slider Demo

Looking forward to your update! :sunflower:

Regards,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3

@mina.rotari Thank you very much for your helpful advice!
It seems that the issue was caused by a mismatch between the timing of the screen display and the video loading.

While we were trying different approaches within our team, we were able to resolve the issue using a different method from the one you suggested. Specifically, we added a script in the Appearance > Page HTML Header section that starts checking after the page has loaded.

<script>
    console.log("Starting video detection");
    
    // ポーリングを使ってvideo要素を検出する関数
    function checkForVideo() {
        console.log("Checking for video element...");
        const video = document.querySelector('video');
        
        if (video) {
            console.log("Video found!", video);
            
            try {
                console.log("Attempting to play video");
                const playPromise = video.play();
                
                if (playPromise !== undefined) {
                    playPromise.then(() => {
                        console.log("Playback started successfully");
                    }).catch(error => {
                        console.log("Playback failed:", error);
                        // 失敗した場合はユーザー操作後に再試行する
                        document.addEventListener('click', function() {
                            video.play();
                            console.log("Playback attempted after user interaction");
                        }, { once: true });
                    });
                }
                
                return true; // video要素が見つかり処理された
            } catch (e) {
                console.error("Error setting up video:", e);
            }
        } else {
            console.log("No video element found yet");
            return false; // video要素が見つからない
        }
    }
    
    // 繰り返しチェックを行う
    let checkCount = 0;
    const maxChecks = 20; // 最大チェック回数
    
    function startVideoCheck() {
        const intervalId = setInterval(() => {
            checkCount++;
            console.log(`Check attempt ${checkCount}/${maxChecks}`);
            
            if (checkForVideo() || checkCount >= maxChecks) {
                clearInterval(intervalId);
                console.log("Video check complete");
            }
        }, 100);
    }
    
    // ページロード後にチェック開始
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', startVideoCheck);
    } else {
        startVideoCheck();
    }
</script>

Thanks again for your support! :smiling_face:

Hi @satoko.toriumi,

Thank you so much for sharing the solution you came up with — it’s great to hear that you were able to resolve the issue with the script! That’s a clever approach to handle the video loading and ensure it works properly on mobile.

I’m glad the suggestions were helpful, and I appreciate you taking the time to update us. If you run into any other questions or issues in the future, don’t hesitate to reach out!

Thanks again for your feedback, and best of luck with your project! :star2:

Kind regards,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3