Android Chrome Background Image Loads Then Disappears

[tomvonpcc]

Hi, first, thanks for the excellent work! I'm having and issues on my Nexus 7 (Android 5.1, Build LMY470) in Google Chrome (42.0.2311.111). The background image seems to load but then it disappears. I'm using the following code. Please let me know if you have any questions and thanks in advance for your help!

<div id="video-box">
    <div id="header">
        <h1>Headline</h1>
    </div>
    <div id="video-overlay"></div>
    <div id="overlay-text">
        Body Text
    </div>
    <div id="feature-video"></div>
</div>

$(document).ready(function () {
    jQuery("#overlay-text").fitText(1.5);
    $('#feature-video').vide('/img/header-video',{
        muted: true,
        loop: true,
        autoplay: true,
        resizing: true
    });
});

#video-box {
    position: relative; 
    #feature-video {
        z-index: 1; 
    }
    #feature-video, #video-box {
        width: 100%; 
        height: 500px;
    }
    #header {
        z-index: 3;
        background: #000000;
        color: #ffffff;
        text-align: center;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 80px;
        opacity: .7;
        h1 {
            margin: 0;
            padding: 0;
            font-size: 200%;
            font-weight: normal;
            line-height: 80px;
        }
    }
    #video-overlay {
        z-index: 2;
        position: absolute;
        top: 80px;
        right: 0;
        bottom: 0;
        left: 0;
        background: url(/img/pattern.png);
        opacity: 1;
    }
    #overlay-text {
        z-index: 4;
        position: absolute;
        top: 80px;
        right: 0;
        bottom: 0;
        left: 0;
        color: #2bb4b2;
        line-height: 100%;
        text-align: center;
        margin-top: 125px;
        text-shadow: 0 0 10px #ffffff, 0 0 10px #ffffff, 0 0 10px #ffffff;
    }
}

[vodkabears]

😫

#35

[vodkabears]

Reproduced on Android 4.4+

[tomvonpcc]

I'm not sure but I think it might have something to do with video trying to be loaded but not ultimately loading. I think that's why the poster may load and then disappear. I had the same issue when using a straight up html5 video tag. Hope that helps.

[vodkabears]

I know the problem, i especially missed this check: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video/autoplay.js#L22-L27, https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video/autoplay.js#L63-L66. I tested it in the Android 4.2.

[vodkabears]

Thanks for the report.

[tomvonpcc]

No problem. Happy to help out.

[maxms]

Hello,

Wondering if there will be a fix for this soon? Any workaround until then?

Thank you!

[vodkabears]

Hi. It will be fixed this week.

[maxms]

Thank you for your response and for this great plug-in!

Mary Makowsky
Max Media Solutions
303-404-8672
http://www.maxms.com

Website design and development

Ilya Makarov wrote:

Hi. It will be fixed this week.

—
Reply to this email directly or view it on GitHub
#77 (comment).

[vodkabears]

https://github.com/VodkaBears/Vide/releases/tag/0.3.5

[maxms]

Thank you so much! Works perfectly:

http://www.maxms.com/sbu/

:)

Mary Makowsky
Max Media Solutions
303-404-8672
http://www.maxms.com

Website design and development

Ilya Makarov wrote:

https://github.com/VodkaBears/Vide/releases/tag/0.3.5

—
Reply to this email directly or view it on GitHub
#77 (comment).