Reputation: 399

How do videos autoplay on iOS at youtube.com

When I set autoplay to true for a YouTube video (IFrame API) on my site, it doesn't work. All the documentation says apple disables autoplay on ios for bandwidth reasons.

However, I see that videos play automatically (without clicking on the video element) on youtube.com on iPad. How did YouTube make it work? It would be hard to imagine Apple does something special just for YouTube.

Upvotes: 31

Answers (5)

Crennotech

Reputation: 519

I stumbled into similar but more complicated issue/requirement.

I need to show YouTube video on a modal popup. Popup is shown on a click. Have taken YouTube API code (From https://developers.google.com/youtube/iframe_api_reference) and modified a bit to work with Bootstrap popup.

Below is my code

    <div class="modal" id="videoModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="videoWrapper">
                    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
                    <div id="player"> </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '360',
            width: '640',
            videoId: 'YOUR VIDEO ID',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        //event.target.playVideo();// Nullifying the action otherwise the video will play as soon as page loads

    }

    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    var done = false;
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
            setTimeout(stopVideo, 6000);
            done = true;
        }
    }
    function stopVideo() {
        player.stopVideo();
    }

    function ShowPopup() {
        $('#videoModal').modal('show');
        player.playVideo();
    }
    //Stop video when bootstrap popup is closed
    $("#videoModal").on('hide.bs.modal', function () {
        player.stopVideo();
    });

</script>

Upvotes: 0

Niki van Stein

Reputation: 10734

You can do it with javascript.

Here is an example:

<div class="video-container">
    <div id="player"> </div> <!--<iframe width="960" height="720" src="//www.youtube.com/embed/5YptIh_avrM?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>-->

</div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '720',
      width: '960',
      videoId: 'YOUR_ID_HERE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }



  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
    event.target.setVolume(20);
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {

  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

Upvotes: 0

Jon

Reputation: 74

I haven't tested this, but you may be able to use Javascript and call the play function for the player, or even just click the element when the page has loaded.

Upvotes: -3