4

I need to be able to load videos in an element programmatically via the iframe api and get it to play on mobile (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 desktop, but for mobile (testing on ios and android) the YouTube player DOES load but the video loads with 'video is not available', or is just a black screen.

Can you help to get this work on mobile?

CarbonDry
  • 850
  • 1
  • 12
  • 25
  • this might help instead of using the api use normal iframe embed http://stackoverflow.com/questions/12106511/jquery-mobile-open-video-link-inside-page – Jianhong Oct 08 '13 at 13:40
  • I know that the embed code does work. But if I use the embed its a workaround, how am I supposed to update the video id? Also why does the embed code work but iframe api not? – CarbonDry Oct 08 '13 at 13:41
  • https://developers.google.com/youtube/iframe_api_reference?hl=zh-TW#Mobile_considerations – CBroe Oct 08 '13 at 14:04
  • @CBroe , I don't mind that the video needs to be played on tap (or by other user interaction), but right now that doesn't work either. – CarbonDry Oct 08 '13 at 14:11
  • It says there that `loadVideoById` might not work as well. – CBroe Oct 08 '13 at 14:14
  • using the iframe embed, you can always change your video ide in the url? different video have a different params after the /embed. if you can print in js i don't see how can you not print in the iframe source? even if you can print in js, you can always update the iframe source thru your js. – Jianhong Oct 09 '13 at 01:13
  • See: http://stackoverflow.com/questions/12496144/can-you-autoplay-html5-videos-on-the-ipad – cottonBallPaws Jul 29 '14 at 12:42

1 Answers1

0

if the user interaction is not an problem you can set a autoplay property equal to 1 in your html file(in iframe). it works in android.

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

looks like android browser does not respond to youtube api, especially with iframe and YTplayer api. it just does not start programatically.

Gaurav Ingalkar
  • 1,217
  • 11
  • 20
  • May be this answer needs an update, because It didn't work, at least now it is `https` and may be further improvments too, thanks – user10089632 Nov 07 '17 at 16:20