Youtube Iframe api not working consistently on ipad

3
votes

With my code below, Youtube Iframe API is not loading a video consistently on iPad (iPad (3rd generation)) safari. It works fine for the first few times on the iPad. when I tab to load another video, it swaps the teaser image correctly. But clicking the play button will not react on third, fourth time onward. on desktop browsers it works fine. Can anyone suggest where I might be wrong or a better way of doing it. 

<!DOCTYPE html>


<div id="player"></div>

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

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

    var player;
    function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE'
        });
    }

    function loader(vid) {
        player.cueVideoById(vid, 5, "large");
    }      
</script>

<ul>
    <li><a href="javascript:void(0);" onclick="loader('eX0Iy93nqKs');"><img src="http://i1.ytimg.com/vi/eX0Iy93nqKs/default.jpg" />One</a></li>
    <li><a href="javascript:void(0);" onclick="loader('aYsGwLWqWI4');"><img src="http://i1.ytimg.com/vi/aYsGwLWqWI4/default.jpg" />Two</a></li>
    <li><a href="javascript:void(0);" onclick="loader('Vlkrm8nLCJo');"><img src="http://i1.ytimg.com/vi/Vlkrm8nLCJo/default.jpg" />Three</a></li>
</ul>

Example code is here. http://jsfiddle.net/AQsZL/

Edited: May be there is relation to this issue https://groups.google.com/forum/#!topic/youtube-api-gdata/EDqVaT5AMYk

2
youtube-iframe-api

2 Answers

0
votes

Just for a suggestion you must go through this player once.Its working fine for me to play youtube videos.

0
votes

Not sure how it is done on iOS. Had the same issue in android, setting the webview to WebChromeClient helped.

wvVideo.setWebChromeClient(new WebChromeClient());