YouTube Embeded Player on Android 4.3

Question

I'm trying to embed a YouTube player into my webpage as below.

The problem I'm having is, the player initially loads and plays the first video fine, but when .loadVideoById is called the player looks to load the video (video title text changes) but then gets stuck on a black screen instead of playing.

This is only happening on Android, with the HTML5 player (both Chrome and the default browser) since updating my phone to Android 4.3, having previously been fine on 4.2.

It works fine through a desktop chrome with the useragent set to fake an Android.

I've also tried on two other Android phones and are having exactly the same problem on both (both are also 4.3). I'm also getting the same behaviour intermittently, using the Google Code Playground Example Youtube Player.

If I attach the ADB Chrome remote debugger, I can see the player get stuck in the buffering state, although video fragments are being downloaded, as expected.

Has anyone experienced anything similar? Or has any suggestions?

Code:

<div id="ytwrapper">
<div id="player" >
</div>
</div>
<script type="text/javascript">
var ytplayer;

2. This code loads the IFrame Player API code asynchronously.

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

3. This function creates an (and YouTube player)after the API code downloads.

function onYouTubeIframeAPIReady() 
{
   ytplayer = new YT.Player('player', { width: 1280,
                            height: 720,
                            videoId: 'M7lc1UVf-VE',
                            frameborder:0,
                 events: 
                          {
                            "onReady": onYouTubePlayerReady,
                    "onStateChange": onytplayerStateChange,
                    "onPlaybackQualityChange": onYTQchange,
                "onError": onYTError
                      }
                          });
 }

function loadnextvid()
{
  ytplayer.loadVideoById(vids[currentvid],0, vqs[currentvid]);
}

function onYouTubePlayerReady(playerId) 
{
loadnextvid();
}
</script>

Answer 1

I had the same issue. Looks like the only way to fix this for the moment is to destroy and recreate the player instance.

I found this solution here: https://code.google.com/p/gdata-issues/issues/detail?id=5273

Works for me Android 4.4, iOS7.

if (player != null) {
    player.destroy();
    player = null;
}


player = new YT.Player('divplayer', {
                width: '100%',
                height: '100%',
                videoId: video_id,

                playerVars: { 'autoplay': 0, 'playerapiid': 'ytPlayer', 'border': 0,  'hd': 1, 'version': 3, 'rel': 0, 'color' : 'red' },


                events: {
                    'onReady': onPlayerReady
                }

            });