YouTube autoplay and stop not working on mobile and tablet

[chechu]

Hey all,

Recently I added the following code to my website http://www.brunomazereel.com so that the YouTube video would automatically start when opening the website, and stop when scrolling down:

<script src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        playerVars: {
            'autoplay': 1,
            'controls': 0,
            'autohide': 1,
            'wmode': 'opaque',
            'showinfo': 0,
            'loop': 1,
            'playlist': 'MVqAA9_7gR4'
        },
        videoId: 'MVqAA9_7gR4',
        events: {
            'onReady': onPlayerReady
        }
    });

}

function onPlayerReady(event) {
    event.target();
    $('#text').fadeIn(400);
}

$(window).scroll(function() {
   var hT = $('.m-video').height(),
       wS = $(this).scrollTop();
   if (wS > hT) {
      player.pauseVideo();
   }
   else {
      player.playVideo();
   }
});
</script>


			<div style="max-width:100%;margin:0 auto;">
				<div style="position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;">
					<div id="player" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 100%; max-height: 100%;"></div>
				</div>
			</div>

It seems that the autoplay function works on all laptops in all browsers, and also on Surface tablet and Lumia smartphone. The YouTube video doesn't have to start automatically on mobile devides, but at least be able to be viewed after clicking, which is not the case on an iPhone 6 (so most probably on none of the iPhone series) neither on a Samsung tablet.

Does anyone know what to change in the code so that the video can be played after clicking on all mobile devices and tablets, keeping the autoplay on other devices?
Thanks!

[jscheuer1]

Well, of course certain devices take it upon themselves to decide whether or not to actually play a video automatically. Many are trying to preserve disk/cache space and/or limit bandwidth unless the user specifically requests play begin. Many of those have a separate control as part of the browser that will start video play. For those that do not, one can always use the native control. However, you have set your player to not have any controls. That's no real problem, they should be able to click on the video. But since you have a cover element over it, they cannot even do that. On some browsers a person can click through a transparent section of a cover element such as the one you have, but on others, one cannot. On the ones where you cannot, even if there were controls, if they're under the cover, they still wouldn't be able to be used. I suspect that's what's happening. So, as a test, just get rid of the cover and see if that allows normal clicking/tapping to start and stop the video on those devices. If it does, you can bring the cover back, just make it much smaller. Right now it covers the entire video, but all it seems to really be needed for are the two little icons in the upper left. So it should be able to be made much smaller, no higher than one of those icons. But before you try working that out, just get rid of it as a test to see if that's the issue. And remember, if the device you are testing on has the page cached, you might not see results right away. Clearing the cache and refreshing the page may be required for that.

[chechu]

Thanks for your reply, John.
As I do not have all these devices, could anyone please check if this page works on iPhone and others: http://brunomazereel.com/test.php
where I removed the cover element.
Thanks!

[chechu]

I just changed the css of the cover a bit on http://brunomazereel.com/, so if anyone could please take a look on other devices to see if you can start/stop the video.
Thanks ya'all!

[molendijk]

Works fine with the ASUS tablet DU9542 and iPAD Air.

[chechu]

It all seems to work fine in all browsers now.
So up for the next improvement

This is the original code:

var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        playerVars: {
            'autoplay': 1,
            'controls': 0,
            'autohide': 1,
            'wmode': 'opaque',
            'showinfo': 0,
            'loop': 1,
            'mute': 1,
            //'start': 15,
            //'end': 110,
            'playlist': 'NQKC24th90U'
        },
        videoId: 'NQKC24th90U',
        events: {
            'onReady': onPlayerReady
        }
    });

}

I have seen it somewhere having different YouTube videos play one after another, but all starting and ending at a specific time.
Eg: first YouTube video, starting at 00:10 and ending at 03:12, followed by another Youtube video starting at 00:45 and ending at 04:12, followed by ... etc. And when all YouTube videos have been shown, the loop starts over again.
So I can make a showreel of different YouTube videos showing the parts that matter to me.

Can anyone help me out, please?

[ddadmin]

Have you checked out Youtube's API documentation? I think it probably contains all the info you need to accomplish what you're asking:

https://developers.google.com/youtub...etting_Started
https://developers.google.com/youtub...HTML5#Overview

For example, I see there is the "start" and "end" options to set the initial video's timeline for playback. And to listen to the current state of the video playback (to move on to the next video when the current one is over, for example), the "onStateChange" event handler. A quick example:

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        playerVars: {
            'autoplay': 1,
           'start': 10,
           'end': 15,
            'controls': 0,
            'autohide': 1,
            //'wmode': 'opaque',
            'showinfo': 0,
            'loop': 0,
            'playlist': ['MVqAA9_7gR4', 'tp5hgjD_Y5g']
        },
        videoId: 'MVqAA9_7gR4',
        events: {
            'onReady': onPlayerReady,
                      'onStateChange': function(e){
                                 console.log(e.data)
                      }
        }
    });

}

e.data tells you the state of the video at the moment: https://developers.google.com/youtub...layback_status

This is just the general idea, but I think the API has all the tools you need to do what you're asking.

[chechu]

Thanks for your reply, DDAdmin.
Indeed it is possible to have several videos playing one after another, as in your code, but what I understand is that only the first one can be controlled when to start and stop.
But is it possible to also give the following videos a specific start and stop time?

[ddadmin]

It is possible, but from my own testing, the Youtube API is rather buggy, and you'll need to go through some trial and error before getting things to work. The below example starts the first video at 5 seconds in, plays it for 2 seconds before playing another video from 5 seconds in and stops at 10 seconds:

<script type="text/javascript">
var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        playerVars: {
            //'autoplay': 1,
						//'start': 10,
						//'end': 15,
            'controls': 1,
            'autohide': 1,
            //'wmode': 'opaque',
            'showinfo': 0,
            'loop': 0,
            'playlist': ['MVqAA9_7gR4', 'tp5hgjD_Y5g']
        },
        videoId: 'MVqAA9_7gR4',
        events: {
            'onReady': onPlayerReady,
						'onStateChange': function(e){
							if (e.data == 0){
								//if current video has finished playing
							}
						}
        }
    });

}

function onPlayerReady(event) {
    //event.target();
    $('#text').fadeIn(400);
		player.seekTo(5, false) // start first video at 5 seconds in
		player.playVideo()
		setTimeout(function(){
			player.stopVideo()
			player.loadVideoById({
			'videoId': 'tp5hgjD_Y5g',
			'startSeconds': 5, // play second video 5 seconds in
			'endSeconds': 10 // stop second video 10 seconds in
			})
		}, 2000) // stop first video after 2 seconds
}

$(window).scroll(function() {
   var hT = $('.m-video').height(),
       wS = $(this).scrollTop();
   if (wS > hT) {
      player.pauseVideo();
   }
   else {
      player.playVideo();
   }
});
</script>

Sorry the indentation seems to be all messed up. All the logic happens inside onPlayerReady(). I find that if you specified the start/end times of the initial video using the "start" and "end" settings, it doesn't work properly (hence I commented them out). Also, the "videoId" setting if defined causes the "playlist" option to no longer be honored, so I also had to comment that out. In other words, the API doesn't seem to behave the way it's described to, so you'll need to play around with other approaches to get the desired outcome.