Embedding videos from youtube programmatically through the iFrame API does not play on mobile devices

Question

I need to be able to upload a video to an element programmatically through an iframe api and get it to play on mobile devices (iOS 6, iOS 7, latest Android).

Here is the javascript:

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

var ping = new VideoModel({
    videoId: 'qMD2Jifubto',
    start: 20,
    end: 28
});

function VideoModel(attributes) {

        this.attributes = {
            videoId: attributes.videoId,
            start: attributes.start,
            end: attributes.end
        }

        this.get = function(attr) {
            if (attr) {
                return this.attributes[attr]
            } else {
                return this.attributes
            }

        }

}

function onYouTubeIframeAPIReady() {

    player = new YT.Player('thumbnail-inner', {
        height: '100%',
        width: '100%',
        enablejsapi: 1,
        events: {
            'onReady': onPlayerReady
        },
        rel: 0,
        playerVars: {
            controls: 0,
            modestBranding: 1,
            showinfo: 0
        }

    });

}

function onPlayerReady(event) {
    event.target.loadVideoById({'videoId': ping.get('videoId'), 'startSeconds': ping.get('start'), 'endSeconds': ping.get('end'), 'suggestedQuality': 'large'});
}

This works flawlessly on the desktop, but for mobile devices (testing on ios and android), the YouTube player loads, but downloading video from the "video is not available" or just a black screen.

Can you help get this job on your mobile device?

Answer 1

, , 1 html ( iframe). android.

    <iframe src="http://www.youtube.com/embed/#{video_id}?enablejsapi=1&autoplay=1"></iframe>

Android youtube api, iframe YTplayer api. .