CODEWITHSUNDEEP
mobileyoutubesafariyoutube-iframe-apiautoplay
Anastasia Stowers
Anastasia Stowers

Reputation: 13

Safari mobile - youtube iframe api - autoplay

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

Answers (1)

Leon Hagendijk
Leon Hagendijk

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

Related Questions