# 【Flutter】youtube playerの埋め込み動画が表示されない解決法

> FlutterでYoutube埋め込みパッケージ（youtube_player_flutter, youtube_player_iframe）でAn error occurred. Please try again later.エラーの解決方法を紹介。JavaScriptコードでvideoIdにハイフンが含まれているとコードが壊れて実行されなくなります。

- 公開日: 2025-10-03
- 著者: Matsu
- タグ: Flutter
- URL: https://tech.anycloud.co.jp/articles/youtube-player-error-fix

---

## 前提

YoutubeをFlutterアプリ内に埋め込むために、以下のパッケージを使用。

<div class="link-card-wrap"><a class="link-card" href="https://pub.dev/packages/youtube_player_iframe" target="_blank" rel="noopener noreferrer"><span class="link-card-body"><span class="link-card-title">youtube_player_iframe | Flutter package</span><span class="link-card-description">Flutter port of the official YouTube iFrame player API. Supports Android, iOS, macOS &amp; Web.</span><span class="link-card-meta"><img class="link-card-favicon" src="./linkcard-01-favicon.webp" alt=""><span class="link-card-domain">pub.dev</span></span></span><img class="link-card-image" src="./linkcard-01-image.webp" alt=""></a></div>

<div class="link-card-wrap"><a class="link-card" href="https://pub.dev/packages/youtube_player_flutter" target="_blank" rel="noopener noreferrer"><span class="link-card-body"><span class="link-card-title">youtube_player_flutter | Flutter package</span><span class="link-card-description">Flutter plugin for playing or streaming inline YouTube videos using the official iFrame player API. Powered by youtube_player_iframe.</span><span class="link-card-meta"><img class="link-card-favicon" src="./linkcard-02-favicon.webp" alt=""><span class="link-card-domain">pub.dev</span></span></span><img class="link-card-image" src="./linkcard-02-image.webp" alt=""></a></div>

```dart
final youtubePlayerController = YoutubePlayerController.fromVideoId(
  videoId: youtubeVideoId,
  autoPlay: true,
  startSeconds: 10,
  params: YoutubePlayerParams(
    enableCaption: false,
    showControls: false,
    mute: isMuted.value,
    loop: false,
    enableJavaScript: true,
    showFullscreenButton: true,
    showVideoAnnotations: false,
  ),
);
      
YoutubePlayer(
  controller: youtubePlayerController,
  aspectRatio: 16 / 9,
),
```

## 一部のYoutube動画埋め込みが表示されないバグ？

実際に、Youtubeの動画IDを入れて動画が表示されるかを確認してみると、表示される動画もあれば表示されない動画もあることに気づきました。

表示されていない動画は、以下のようなエラーが出ています。

「エラーが発生しました。しばらくしてからもう一度お試しください。」

<figure><img src="./image-001.webp" alt="An error occurred. Please try again later." width="1140" height="641"></figure>

## 【原因】パッケージの既知バグで動画idにハイフンが含まれているとエラーになる

色々と調べてissueを漁ったところ、以下の説が有力でした。

[https://github.com/sarbagyastha/youtube\_player\_flutter/issues/1060](https://github.com/sarbagyastha/youtube_player_flutter/issues/1060)

> このバグは、JavaScriptコードでvideoIdを変数として使用しているために発生します。そのため、idにハイフンが含まれていると、コードが壊れて実行されなくなります。
> 
> これは重大な間違いです。多くの問題があったのも当然です。ハイフンを含むすべてのビデオIDが問題を引き起こすのは事実です。

パッケージ自体、Youtubeの埋め込みにwebivewが使用されている関係で、JavaScriptの影響を受けているんですね。

## 【解決方法】idなしでコントローラーを初期化後にloadVideoByIdで動的に読み込む

解決方法としては、ビデオIDなしでコントローラーを初期化し、`loadVideoById(...)` を使用してビデオIDを後から動的に読み込むことで表示されました。

```dart

final youtubePlayerController = YoutubePlayerController(
  params: const YoutubePlayerParams(
    enableCaption: false,
    showControls: true,
    mute: false,
    loop: false,
    enableJavaScript: true,
    showFullscreenButton: true,
    showVideoAnnotations: false,
  ),
);

await youtubePlayerController!.loadVideoById(
  videoId: youtubeVideoId,
);
      
YoutubePlayer(
  controller: youtubePlayerController,
  aspectRatio: 16 / 9,
),
```

割とホットなバグな気がしますが、まだ修正はされていないみたいです。

今後の修正に期待したい気持ちはありますが、しばらくは修正されなさそう。。。

とはいえ、Youtube埋め込み系のパッケージを色々と調査してみた限り、本記事で紹介しているyoutube\_player\_iframeが一番良さそうなので、このバグは目を瞑るしかなさそうです。
