Custom play button for YouTube player in Android (and other mobiles)?

966 views Asked by At

It is easy to create a custom play button for an embed YouTube video using their API, however it seems that the button cannot launch the video in mobile environment, especially Android. When you click it there, screen simply goes forever black with ever spinning loading animation.

<div id="wrapper">
    <div id="video">

    </div>
    <a href="javascript:;" id="play">Play</a>
</div>


<script>
var player, tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

window.onYouTubeIframeAPIReady = function() {
    player = new YT.Player('video', {
        height: '320',
        width: '240',
        videoId: '5oxIQe3XngY',
        playerVars: {
            modestbranding: 1,
            controls: 0,
            rel: 0

        }
    });

    player.addEventListener('onReady', function(e) {
        document.getElementById('play').onclick = function() {
            player.playVideo();
        };
    });

    player.addEventListener('onStateChange', function(e) {
        if (e.data == 1) { 
            document.getElementById('play').style.display = 'none';
        }
    });
};
</script>

Here's the fiddle: http://jsfiddle.net/HArsN/

Any solution to that? Is it necessary to launch the video through bundled button only?

0

There are 0 answers