CODEWITHSUNDEEP
javascriptjqueryyoutube-api
Shriya
Shriya

Reputation: 35

Youtube video autoplay is not working on chrome in iphone device

if($('.explore-video-btn').length > 0) {
		var video_id = youtube_parser($('.explore-video-btn').attr('data-video-url'));
	}
	
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	//Holds a reference to the YouTube player
	

	//this function is called by the API
	if(document.getElementsByClassName('explore-video-btn').length !== 0) {
		document.getElementsByClassName('explore-video-btn')[0].addEventListener('click', function() {
			onYouTubePlayerAPIReady();
		});
	}

	var player;
	function onYouTubePlayerAPIReady() {
	
		setTimeout(function() {
		
			player = new YT.Player('youtube-iframe', {
				videoId: video_id,
				playerVars: {'rel': 0, 'showinfo': 0, 'ecver': 2, 'autoplay': 1},
				events: {
					'onReady': onPlayerReady,
					'onStateChange': onPlayerStateChange
				}
			});
			//subscribe to events
			
		}, 200);
	}
	
	function onPlayerReady(event) {
		event.target.mute();
		event.target.playVideo();
	}

	function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
			event.target.stopVideo();
		}
	}

I have used youtube API to autoplay video, it works properly on android devices in chrome browser but does not autoplay on iphone devices in chrome browser. I have found the youtube API document warning such as "Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback.".

The warning says autoplay does not work on safari in ios but not mention chrome in ios. Please help me to find solution. Thank you.

Upvotes: 1

Views: 4801

Answers (1)

4b0
4b0

Reputation: 22321

Because it's not a browser problem. It's about iOS.

Policies for video Starting in iOS. 

<video autoplay> elements will now honor the autoplay attribute, for elements which meet the following conditions:
<video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
<video muted> elements will also be allowed to autoplay without a user gesture.
If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
<video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
<video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.

See a full list about these restrictions on official site.

No you cant from IFrame api:

Mobile Considerations Autoplay and Scripted Playback The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). Here's an excerpt from Apple's documentation:

"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."

Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.

From YouTube IFrame Player API official document

Conclusion -> No you can't

Upvotes: 1

Related Questions