Cannot play some of the embedded youtube video in sencha touch carousel

Strange behaviour on a Sencha Touch carousel on a Safari browser. I can seem to figure out what is wrong with it.

Simple Sencha Touch carousel with 2 cards, each card has an embedded youtube video using iFrame. First video in a first card play with no problem, but the second card the play button on the video player will not respond to clicked/touch.

The following code is taken from here I just replace the html value on the items:http://ift.tt/UQVy8u

Code:

Ext.application({
    launch: function() {
        Ext.create('Ext.Carousel', {
            fullscreen: true,
            direction: 'horizontal',
            defaults: {
                styleHtmlContent: true
            },
            items: [{
                html: '<iframe height="480px" width="720px" class="youtube-player" type="text/html" src="http://ift.tt/1jVNqt2" frameborder="0" allowfullscreen></iframe>',
                style: 'background-color: #759E60'
            }, {
                html: '<iframe height="480px" width="720px" class="youtube-player" type="text/html" src="http://ift.tt/UQVy8A" frameborder="0" allowfullscreen></iframe>',
                style: 'background-color: #5E99CC'
            }]
        });
    }
});

Tested on Google Chrome and Android devices the 2 video can be played. But on iOS device and Safari browser the video on the second carousel item cannot be played.