CODEWITHSUNDEEP
jquerybackgroundyoutube
kampfkuchen
kampfkuchen

Reputation: 484

Bigvideo.js. Differnent background video for mobile devices?

I am very new to all this! I am using bigvideo.js jquery plugin to play a video in the background of my homepage. That works great. The only problem is, that it does not work on mobile devices because of autoplay (i guess).
So now I figured why not give mobile device visitor a youtube player, to click on to start the video.
Here is my not working code: 

<script>
        $(function() {
            var BV,
            videoPlayer,
            isTouch = Modernizr.touch;
            BV = new $.BigVideo({useFlashForFirefox:false, forceAutoplay:isTouch});
            BV.init();
            if (!isTouch) {
                BV.show('video.mp4', {altSource:'video.ogv'});
            }else{
                <iframe width="560" height="315" src="//www.youtube.com/video.mp4" frameborder="0"></iframe>
            }
        });
</script>

I am also happy for any other idea, to solve this problem!
Thank you so much for your help!

Upvotes: 0

Views: 1584

Answers (2)

just a slime
just a slime

Reputation: 490

You are mixing HTML in with your Javascript. The iframe tag you have in your script should be throwing a syntax error since it is not javascript.

I think what you're trying to do can be accomplished by putting the iframe on the page, but give it an ID and hiding it...

<iframe id="mobileVideo" style="display:none;" width="560" height="315" src="//www.youtube.com/video.mp4" frameborder="0"></iframe>

...And in the else part of your conditional statement, simply show it via jQuery:

if (!isTouch) {
    BV.show('video.mp4', {altSource:'video.ogv'});
} else {
    $('#mobileVideo').show();
}

Upvotes: 1

Renegade
Renegade

Reputation: 802

Don't know if you're still looking for an answer, but If you remove the "forceautoplay:isTouch", it should work

Upvotes: 0

Related Questions