Flutter Web (3.7.5) - Height/Width of Platform View Type - youtube_player_iframe

1.2k Views Asked by At

I have been using the youtube_player_iframe package for my web project, and have been trying to understand and fix the below:

Height of Platform View type: [youtube-0] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.
Width of Platform View type: [youtube-0] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.

Everything seems to work fine as-is, but it is quite bothersome to see this message appear. In saying that, I do want to determine and fix the root cause. In the Flutter 2.5 release, changes were made as to how the platform handled resizing and positioning views. The documentation of the change can be found with a migration guide here. Though, even with the guide, I seem to lack the ability to utilize this.

Here's the migration code from the Flutter page:

ui.platformViewRegistry.registerViewFactory(viewType, (int viewId) {
  final html.Element htmlElement = html.DivElement()
    // ..other props
    ..style.width = '100%'
    ..style.height = '100%';
  // ...
  return htmlElement;
});

I will provide a few snippets of my code, but if there is anything you would like to see in particular, please ask.

CustomYouTubePlayer class (StatefulWidget)

// YoutubePlayerController - Instantiated in initState();
late YoutubePlayerController _youtubePlayerController;

// Marks the currently played video
String currentVideo = "";

  @override
  void initState() {
    super.initState();
    youtubePlayerInit();
  }

  @override
  void dispose() {
    super.dispose();
    // Close the YouTube Player
    _youtubePlayerController.close();
    // Cancel the subscription to the stream
    _streamSubscription.cancel();
  }

  // Instantiate the YoutubePlayerController controller
  youtubePlayerInit() {
    _youtubePlayerController = YoutubePlayerController(
      params: const YoutubePlayerParams(
        showControls: true,
        mute: false,
        showFullscreenButton: true,
        loop: false,
        strictRelatedVideos: true,
      ),
    )..listen((event) {
        playerState = event.playerState;
        if (event.hasError) {
          widget.updateParent(false, event.error.toString());
        }
      });
  }

Example of how I may load a video (I also have pause and resume)

  // Loads the video by Url, and records the Url as the "Current" video
  void loadVideo(String url) {
    _youtubePlayerController.loadVideo(url);
    currentVideo = url;
  }

Building the player

  @override
  Widget build(BuildContext context) {
    return kIsWeb
        ? YoutubePlayerScaffold(
            controller: _youtubePlayerController,
            builder: (context, player) {
              return player;
            },
          )
        // ToDo - Implement Mobile Support
        : Container();
  }

Any help would be greatly appreciated here. Thank you in advance!

Edit: I tried using the YoutubePlayerController.setSize(width, height) method. I took note that it was a function of Future<void>. In knowing this, I thought it was perhaps my mistake that I didn't set the size asynchronously. I tried the below, where an empty container would be built in place of the YoutubePlayerScaffold, until my playerSizeSet boolean was true. However, the function never returned... only timed out.

  Future<void> setSize() async {
    await _youtubePlayerController.setSize(480, 270).then((_) {
      setState(() {
        playerSizeSet = true;
        return;
      });
    }).onError((error, stackTrace) {
      print("error");
      return;
    }).whenComplete(() {
      print("complete");
      return;
    }).timeout(const Duration(seconds: 1), onTimeout: () {
      print("timed out");
      return;
    });
  }

Thoughts on what to try next?

0

There are 0 best solutions below