Why background has small dots when I using YoutubePlayerIFrame?

Question

I'm using youtube_player_iframe for my web app.

I wrote code below in FutureBuilder in StatefulWidget .

                  SizedBox(
                    height: 200,
                    width: MediaQuery.of(context).size.width / 3,
                    child: YoutubePlayerIFrame(
                      controller: youtubeController,
                      aspectRatio: 16 / 9,
                    ),
                  ),

This code is the cause of this question. Only when this code is wroten will the dots appear in the background. Like this pic;

When I remove above code, background is fine.

youtubeController

  YoutubePlayerController youtubeController = YoutubePlayerController(
    initialVideoId: "XgUOSS30OQk",
    params: const YoutubePlayerParams(
      showVideoAnnotations: false,
      autoPlay: false,
      startAt: Duration(seconds: 0),
      showControls: true,
      showFullscreenButton: false,
    ),
  );

Widgets are working fine except for background glitches. No errors occurred. My memory may not be correct, but I feel that this has happened without using a third-party api before. What is the solution?

Additional

I changed index.html to show loading circle while init, referring here. Then background is like below:

score 0 · Answer 1 · answered Oct 14 '21 at 09:01

I can’t still understand why this happen. but I could solve this problem. The solution is easy; just add some widget in same Column().

        child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        SizedBox(
          height: 100,
        ),
        Text("AAAAAA"), // Text() solve this issue. idk why
        SizedBox(
          height: 100,
        ),
        SizedBox(
          height: 200,
          width: MediaQuery.of(context).size.width / 3,
          child: YoutubePlayerIFrame(
            controller: YoutubePlayerController(
              initialVideoId: "XgUOSS30OQk",
              params: const YoutubePlayerParams(
                showVideoAnnotations: false,
                autoPlay: false,
                startAt: Duration(seconds: 0),
                showControls: true,
                showFullscreenButton: false,
              ),
            ),
            aspectRatio: 16 / 9,
          ),
        ),
      ],
    )

Why background has small dots when I using YoutubePlayerIFrame?

1 Answers1