Web app using youtube_player_iframe, video won't play if it's the only one in the playlist

Question

I’m trying to understand why youtube_player_iframe 3.1.0 isn’t working for me. I used the sample app verbatim from here except I modified initState() to add my video to the playlist (and changed startSeconds to 0). (The unmodified sample app works fine.)

If my video is the only one in the playlist the YouTube thumbnail doesn't appear and clicking 'play' fails with "An error occurred. Please try again later. (Playback ID: qpAJu2DzWFdK9whg)".

However, if I add another video to the playlist my video works fine. (Very strange.)

The test video I'm using also describes the problem (with screenshots) https://youtu.be/FC4x8mdbbXE.

This initState() FAILS:

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      params: const YoutubePlayerParams(
        showControls: true,
        mute: false,
        showFullscreenButton: true,
        loop: false,
      ),
    )
      ..onInit = () {
        _controller.loadPlaylist(
          list: [
            'FC4x8mdbbXE', // <-- if my video is the only one in the list is does NOT work
            // 'tcodrIK2P_I',
            // 'nPt8bK2gbaU',
            // 'K18cpp_-gP8',
            // 'iLnmTe5Q2Qw',
            // '_WoCV4c6XOE',
            // 'KmzdUe0RSJo',
            // '6jZDSSZZxjQ',
            // 'p2lYr3vM_1w',
            // '7QUtEmBT_-w',
            // '34_PXCzGw1M',
          ],
          listType: ListType.playlist,
          startSeconds: 0,
        );
      }
      ..onFullscreenChange = (isFullScreen) {
        log('${isFullScreen ? 'Entered' : 'Exited'} Fullscreen.');
      };
  }

This initState() WORKS:

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      params: const YoutubePlayerParams(
        showControls: true,
        mute: false,
        showFullscreenButton: true,
        loop: false,
      ),
    )
      ..onInit = () {
        _controller.loadPlaylist(
          list: [
            'FC4x8mdbbXE', // <-- my video
            'tcodrIK2P_I', // <-- if there's at least one other video in the list mine works
            // 'nPt8bK2gbaU',
            // 'K18cpp_-gP8',
            // 'iLnmTe5Q2Qw',
            // '_WoCV4c6XOE',
            // 'KmzdUe0RSJo',
            // '6jZDSSZZxjQ',
            // 'p2lYr3vM_1w',
            // '7QUtEmBT_-w',
            // '34_PXCzGw1M',
          ],
          listType: ListType.playlist,
          startSeconds: 0,
        );
      }
      ..onFullscreenChange = (isFullScreen) {
        log('${isFullScreen ? 'Entered' : 'Exited'} Fullscreen.');
      };
  }

score 0 · Answer 1 · answered Dec 04 '22 at 00:35

This appears to be a bug in the playlist feature of youtube_player_iframe (or perhaps an underlying library). For anyone who, like me, ran across this issue because you just used the example to play a single YouTube video (and, like me, didn't bother to look at the other methods), there's an easy work-around, just replace loadPlaylist() with cueVideoById() followed by playVideo().

@override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      params: const YoutubePlayerParams(
        showControls: true,
        mute: false,
        showFullscreenButton: true,
        loop: false,
      ),
    )..onInit = () {
        _controller.cueVideoById(videoId: 'xxxxxx'); // your YouTube video id
        _controller.playVideo();
      };
      setState(() {});
    });
  }

Web app using youtube_player_iframe, video won't play if it's the only one in the playlist

1 Answers1