[BUG] Grey Screen issue when you deploy web app

[superman-danny]

It shows and works perfectly in development server but when it goes live or in release mode. I get a grey screen

LIVE

PRODUCTION

[sarbagya-acme]

https://sarbagyastha.github.io/youtube_player_flutter/#/

Seems to be working, can you provide console logs ?

[moradiyajay]

I'm getting the same issue. Any solution?

[droidbg]

@superman-danny did you find any solution ? I am also facing the same.

[Z3ZEL]

Same here, grey screen is the flutter production way to replace the big red error screen on debug btw. It's working perfectly on debug mode (using flutter run). But soon as I use the compiled web version, It turns into error. I managed to catch this : Null check operator used on a null value bjs@http://127.0.0.1:5000/main.dart.js:34824:14 acd@http://127.0.0.1:5000/main.dart.js:113977:3 bmB@http://127.0.0.1:5000/main.dart.js:34131:3 b6P@http://127.0.0.1:5000/main.dart.js:34133:20 aB@http://127.0.0.1:5000/main.dart.js:111242:7 J1@http://127.0.0.1:5000/main.dart.js:91694:14 fA@http://127.0.0.1:5000/main.dart.js:91664:6.....

Not that useful tho.

If someone could help us, it'd be amazing :)

[droidbg]

@Z3ZEL deploying to production with a workflow is solving the issue.

[ReinisSprogis]

Same here. Suspecting CORS to be a problem.

[romain-girou]

Hello there ! Having the same issue, what did you guys do (@droidbg and @ReinisSprogis) to fix it ?

[romain-girou]

Well fixed it myself, looks like it's link to the renderer used to build the web. I was using the default CanvasKit and I build and deploy using the html and deployed and it works. the command to build with html : flutter build web --web-renderer html

[ReinisSprogis]

@romain-girou html renderer isn't recomended. Low performance. I just needed embeded iframe youtube video. So i made my own widget that is doing just that.

[droidbg]

@ReinisSprogis it would be helpful if you could share your code of the widget, thanks.

[ReinisSprogis]

@droidbg @romain-girou

import 'package:flutter/material.dart';
import 'package:web/web.dart' as web;
import 'dart:ui_web' as ui;

import 'package:youtube_parser/youtube_parser.dart';

class YoutubeVideoIFrame extends StatefulWidget {
  const YoutubeVideoIFrame({super.key, required this.videoURL});
  final String videoURL;
  @override
  State<YoutubeVideoIFrame> createState() => _YoutubeVideoIFrameState();
}

class _YoutubeVideoIFrameState extends State<YoutubeVideoIFrame> {
  @override
  void initState() {
    super.initState();
    String? id = getIdFromUrl(widget.videoURL);
    if (id != null) {
      ui.platformViewRegistry.registerViewFactory(
          'youtube_player_${widget.videoURL}',
          (int viewId) => web.HTMLIFrameElement()
            ..style.width = '100%'
            ..style.height = '100%'
            ..allowFullscreen = true
            ..src = 'https://www.youtube.com/embed/${id}'
            ..style.border = 'none');
    }
  }

  @override
  Widget build(BuildContext context) {
    return HtmlElementView(viewType: 'youtube_player_${widget.videoURL}');
  }
}

[dev210202]

@superman-danny @droidbg I found the solution in this link. https://github.com/sarbagyastha/youtube_player_flutter/issues/819#issuecomment-1650611000

[natouralDS]

Is it works? Becaus a I get this error:

Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.