Reputation: 13
I'm trying to get a Youtube video to autoplay on safari mobile using the YouTube iframe API. Here's my code:
<div class="player-wrapper featured-small featured-medium featured-large featured-xlarge">
<div id="player"></div>
</div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: {
'controls': 0,
'showinfo': 0,
'autoplay': 1,
'loop': 1,
'modestbranding': 1,
'playlist': '<?php echo $scales_hero_video; ?>'
},
videoId: '<?php echo $scales_hero_video; ?>',
events: {
'onReady': onPlayerReady}
});
}
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
</script>
Thanks in advance guys!
The video is supposed to autoplay and loop while being muted. But the video does not begin playing in safari mobile at all.
Upvotes: 1
Views: 7273
Reputation: 76
Apple does not allow autoplay or scripted playback in WebKit-based browsers on iOS-devices, this to prevent unwanted downloads over cellular network.
As mentioned in the YouTube Player API manual (https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations):
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.
So what you want, autoplaying a video on Safari Mobile is not possible...
Sincerely,
Leon Hagendijk
Upvotes: 4