Simulate mouse click on Youtube videos on Android Kitkat

Question

Youtube allows embedding user created playlist with the help of iframe code. I would like to embed them in a webpage to be played back on Android (Kitkat 4.4) tv box hardware. However it requires user to first click on the video.

As I found out that Apple iOS and Android disables autoplay on most mobile platforms to avoid poor user experiences

However, is it possible to simulate a user click on the iframe using Jquery or pure JS solution (preferred). Something like this:

 function myFunction() {
         setTimeout(function() {           ("#myiframe").triggerHandler('click');    },3000)
                };

I'd be very grateful if somebody can help me with this as this functionality is crucial for my purpose and I have searched extensively but couldn't get a proper solution.

thanks dkj

This is similar http://stackoverflow.com/questions/2381336/detect-click-into-iframe-using-javascript — dkjain, Apr 05 '15 at 09:59
I think this soln can be useable to simulate mouse click however would require a skilled JS dev (which I'm not) to automate user click http://www.objectpartners.com/2013/08/21/triggering-a-youtube-video-from-clicking-a-button-image-and-replacing-when-ended/#comment-10255 — dkjain, Apr 05 '15 at 10:03

SaschaM78 · Accepted Answer · 2015-04-05T11:18:22.817

1

Good morning dkjain,

as far as I've read in the Youtube Player API docs, there are several events triggered as soon as the Player is loaded, one of these events that should be used is the onReady() event.

Here's some updated code on how to auto-play a single video or a playlist:

HTML:

<div id="player"/> will be the placeholder for the Youtube player

Playing a playlist (with playerVars):

JS:

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        playerVars: { 
            'listType': 'playlist',
            'list': 'PLi5VEqNXXQjVJ4-xZb92wTUawkSQRal0u'            
        },
        events: {
          'onReady': onPlayerReady
        }
    });
}
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;

// as soon as the player is loaded, start the playback
function onPlayerReady(event) {
  event.target.playVideo();
}

var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
document.head.appendChild(tag);

There is also an autoPlay: 1 playerVar, but this does not seem to be available on mobile plaforms: https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations

Play a single video

JS:

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'nhX4rQ79C1A',
    events: {
        'onReady': onPlayerReady
    }
  });
}

window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;

// as soon as the player is loaded, start the playback
function onPlayerReady(event) {
  event.target.playVideo();
}

var tag = document.createElement('script');
tag.src = "http://www.youtube.com/iframe_api";
document.head.appendChild(tag);

JSFiddles showing the above code:

Single video: http://jsfiddle.net/Moonbird_IT/akjpmvpf/

Playlist: http://jsfiddle.net/Moonbird_IT/akjpmvpf/4/ (updated again)

Let me know if we are going in the right direction :-)

edited Apr 05 '15 at 11:18

answered Apr 05 '15 at 10:16

SaschaM78

4,376
4
33
42

Hy very good morning, good to see your reply, I've been struggling for past 2 days with this. The code works flawlessly for single video however I'm trying to embed a playlist. Could you plz try and make this work for a playlist? Here is my playlist code: ...thanxs. – dkjain Apr 05 '15 at 10:48
Would this help: http://stackoverflow.com/questions/9313216/example-youtube-playlist-code . I tried it but I couldn't get it work. – dkjain Apr 05 '15 at 10:55
Could you take another look? The answer now contains an example of how to play a playlist, the only thing you basically need to change compared to the previous example is to include the `playerVars` instead of giving a VideoID. HTH and happy Easter! – SaschaM78 Apr 05 '15 at 11:05
Hy, 'autoplay': 1, works in desktop browser but will not work my mobile device and that is the problem i've been struggling with. – dkjain Apr 05 '15 at 11:12
Yes, just read about that. I combined the first and second code and now it should work. – SaschaM78 Apr 05 '15 at 11:19
Ah. got it working by just replacing videoid with playlist code. And so once again the day was saved. A simple masterstroke does the trick. I feel so timid.Hahahaha. Any suggestion for a good JS book for beginners ? – dkjain Apr 05 '15 at 11:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74510/discussion-between-dkjain-and-sascham78). – dkjain Apr 05 '15 at 11:24
Hi SaschaM78, How's U? Can u plz help with this http://stackoverflow.com/questions/31544644/jquery-div-slideshow-hiding-child-elements...thanks dkj – dkjain Jul 22 '15 at 10:10

Simulate mouse click on Youtube videos on Android Kitkat

1 Answers1

Linked