[BUG] Problem with playing videos that their ids have a hyphen

[fibau]

Is there an existing issue for this?

• I have searched the existing issues

Package

youtube_player_iframe (Default)

What happened?

I am trying to play videos in my app using youtube_player_iframe and have used the package for a while and I think the bug was introduced in a recent update as I have not encountered the issue before even though I have used the package a lot.

Below is what happens when I play videos with hyphens in id (first and second have hyphens in ids)

My app:

Example app of the package(second video has hyphen and don't load):

In the example app, the second video of the video list page doesn't load and it's the only one that have an hyphen in it. When I replace it with another ID it works. The homepage doesn't have that problem even though two of the video IDs have hyphens in it.

SO I think it happens when YoutubePlayerController.fromVideoId is used?

This is a sample of my code:

import 'package:flutter/material.dart';
import 'package:youtube_player_iframe/youtube_player_iframe.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: YoutubeEmbeddedtwo(),
    );
  }
}

class YoutubeEmbeddedtwo extends StatefulWidget {
  const YoutubeEmbeddedtwo({super.key, this.videoId});

  final String? videoId;

  @override
  State<YoutubeEmbeddedtwo> createState() => _YoutubeEmbeddedtwoState();
}

class _YoutubeEmbeddedtwoState extends State<YoutubeEmbeddedtwo> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController.fromVideoId(
      videoId: 'wG8gYDWj-mg', // Video ID with hyphen does not work
      // videoId: 'GfaypJIDolk', // Video ID without hyphen works
      startSeconds: 200,
      autoPlay: true,
      params: const YoutubePlayerParams(
        showFullscreenButton: true,
        enableCaption: true,
        mute: false,
        strictRelatedVideos: false,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: SingleChildScrollView(
          child: YouTubeContainerDesignNew(controller: _controller),
        ),
      ),
    );
  }
}

class YouTubeContainerDesignNew extends StatelessWidget {
  const YouTubeContainerDesignNew({
    super.key,
    required YoutubePlayerController controller,
  }) : _controller = controller;

  final YoutubePlayerController _controller;

  @override
  Widget build(BuildContext context) {
    return YoutubePlayer(
      controller: _controller,
      aspectRatio: 16 / 9,
    );
  }
}

This is a shorter sample

import 'package:flutter/material.dart';
import 'package:youtube_player_iframe/youtube_player_iframe.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: YoutubePlayer(
          controller: YoutubePlayerController.fromVideoId(
            videoId: 'wG8gYDWj-mg', // // Video ID with hyphen
            // videoId: 'bmgia-h1qNg', // more with hyphe
            // videoId: '7QUtEmBT_-w',
            // videoId: 'K18cpp_-gP8',
            // videoId: 'wG8gYDWj-mg',
            // videoId: 'GfaypJIDolk', // Video ID without hyphen works
            autoPlay: false,
          ),
        ),
      ),
    );
  }
}

What is the expected behaviour?

I expect the videos to load but they show error or black screen

How to reproduce?

You play a video by using YoutubePlayerController. The video ID should have an hyphen in it, such as: wG8gYDWj-mg

Flutter Doctor Output

[√] Flutter (Channel stable, 3.24.3, on Microsoft Windows [Version 10.0.22621.4317], locale en-US)
    • Flutter version 3.24.3 on channel stable at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2663184aa7 (8 weeks ago), 2024-09-11 16:27:48 -0500
    • Engine revision 36335019a8
    • Dart version 3.5.3
    • DevTools version 2.37.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\HAWKAR STORE\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio2\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Build Tools 2022 17.6.2)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools
    • Visual Studio Build Tools 2022 version 17.6.33723.286
    • Windows 10 SDK version 10.0.22000.0

[√] Android Studio (version 2024.1)
    • Android Studio at C:\Program Files\Android\Android Studio2
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.11+0--11852314)

[√] VS Code (version 1.95.2)
    • VS Code at C:\Users\HAWKAR STORE\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.100.0

[√] Connected device (4 available)
    • SM A515F (mobile) • RZ8MC0BWWAT • android-arm64  • Android 13 (API 33)
    • Windows (desktop) • windows     • windows-x64    • Microsoft Windows [Version 10.0.22621.4317]
    • Chrome (web)      • chrome      • web-javascript • Google Chrome 130.0.6723.117
    • Edge (web)        • edge        • web-javascript • Microsoft Edge 130.0.2849.80

[√] Network resources
    • All expected network resources are available.

• No issues found!

[Anupdas]

I'm facing a similar issue, after updating video ids with hyphen is not working.

As a temporary workout by loading the video using url, this is found to be working.

import 'package:youtube_player_iframe/youtube_player_iframe.dart';

extension YoutubePlayerControllerEx on YoutubePlayerController {
  /// Due to a bug we are converting the videoid to url
  static fromVideoId({
    required String videoId,
    YoutubePlayerParams params = const YoutubePlayerParams(),
    bool autoPlay = false,
    double? startSeconds,
    double? endSeconds,
  }) {
    final controller = YoutubePlayerController(params: params);
    final url = 'http://www.youtube.com/v/$videoId';
    if (autoPlay) {
      controller.loadVideoByUrl(
        mediaContentUrl: url,
        startSeconds: startSeconds,
        endSeconds: endSeconds,
      );
    } else {
      controller.cueVideoByUrl(
        mediaContentUrl: url,
        startSeconds: startSeconds,
        endSeconds: endSeconds,
      );
    }

    return controller;
  }
}

[fibau]

@Anupdas do you know from which version the bug was introduced? I may decide to downgrade unless it's fixed. Migrating to using URL can't be done in my project. If it's not fixed I may try your solution in the future. My project isn't released now so there is no need for URL migration.

[ryosoul]

Duplication of #981