Youtubeの埋め込み動画でエラー153が出る問題の治し方

はじめに

株式会社Sally 所属エンジニアの @wellPicker です。
弊社では、スマホやパソコンでマダミスを遊べるアプリであるウズや、マダミス情報・予約管理サイトマダミス.jp、マダミス開発ツールウズスタジオを開発しています。
マダミス自体についてはこちらをご覧ください。

いきなり本題

最近、ウズのアプリに埋め込んでいるYoutube動画を再生できない問題が発生するようになりました。

このように、シナリオの紹介動画をアプリ内で再生できない問題が発生しました

※なお、上の画像は開発環境であるため、実際のウズとは一部見た目が異なります。

実際の実装

この画面では、webview_flutterを使用して動画を埋め込んでいます。
実際の実装を、記事用に少しだけ見やすくしたものが以下になります。

import 'package:flutter/widgets.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:webview_flutter/webview_flutter.dart';

class _VideoPlayer extends HookWidget {
  const _VideoPlayer(this.url);

  final String url;

  @override
  Widget build(BuildContext context) {
    final controller = useMemoized(() {
      final controller = WebViewController()
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..loadRequest(Uri.parse(url));
      return controller;
    }, [url]);

    return WebViewWidget(controller: controller);
  }
}

原因

困ったことに、Youtubeのエラー153について、直接的な情報はほとんど見つかりませんでした。
しかし、根気強くエラー153について調べていたところ、このページに辿り着きました。
https://developers.google.com/youtube/terms/required-minimum-functionality?hl=ja#embedded-player-api-client-identity

どうやらYoutubeの動画を埋め込む際には、HTTP Refererを提供する必要があるようですね。
さらにYoutubeAPIサービス利用規約の改訂履歴を見ると、どうやら2025年7月、この記事を書いた時点の約4ヶ月前に埋め込みプレーヤーに関する規約が改定されたことがわかります。
このことから、比較的最近、埋め込みプレーヤーに関する仕様が変更された可能性が考えられます。

修正方法

公式のガイド、およびこちらの記事を参考にして、HTTP Refererヘッダーを追加します。中身はアプリのバンドルIDを設定すれば問題なさそうです。
また、Refererの参照を阻害されないように、strict-origin-when-cross-originというReferrer-Policyを設定しています。
RefererとReferrerの表記揺れは気になりますが、公式が明言している以上公式の表記に従うのが安全だと思います。

class _VideoPlayer extends HookWidget {
  const _VideoPlayer(this.url);

  final String url;

  @override
  Widget build(BuildContext context) {
    final controller = useMemoized(() {
      final controller = WebViewController()
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..loadRequest(
          Uri.parse(url),
          // headersを追加
          headers: {
            'Referer': 'https://jp.sally-inc.uzu',
            'Referrer-Policy': 'strict-origin-when-cross-origin',
          },
        );
      return controller;
    }, [url]);

    return WebViewWidget(controller: controller);
  }
}

実際にこの変更をしたところ、無事に動画を再生できるようになりました！

懸念点

実は、webview_flutterの公式ドキュメントには、「loadRequestのheadersはAndroidでは機能しない」という内容が書かれています。
しかし、今回検証をした限りではAndroid端末でもこの方法で動画再生できるようになりました。
おそらく、webview_flutterのドキュメントが更新されていない可能性が高そうです。
もしもloadRequestでは問題が発生する場合は、webview_flutterのドキュメントに従い、loadHtmlStringを使用してhtmlを直接書く必要がありそうです。

まとめ

今回は、flutterアプリに埋め込んだYoutubeの動画が再生できない問題の修正方法を解説しました。
これを書いた時点ではX(旧Twitter)などでもこの問題が発生しているようなので、上記の説明と合わせてYoutube側の仕様が最近変更された可能性は高いです。
flutterに限らず、Youtube動画が再生されない問題で悩んでいる方は一度こちらの記事の内容を参考にしてみてください！