Video wont load while using the youtube_player_flutter package

Question

I am working on a page, there is cover image when clicked a screen with a youtube video appears and plays. The problem is that the video does not play at all it simply refuses to play.

01 - Below is a screen shot of the image with a play button

02 - Below is a result of clicking the play button

03 - Below is the code used to run this action

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';
import 'package:itiqapp/models/info_details.dart';

class CoverVideo extends StatelessWidget {
  const CoverVideo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    InfoDetails infoDetails = InfoDetails.getAboutUsDetails();
    String videoId = infoDetails.videoCoverID;
    String imageAddress = infoDetails.pictureCoverURL;

    return GestureDetector(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => VideoPlayerScreen(videoId: videoId),
          ),
        );
      },
      child: Stack(
        alignment: Alignment.center,
        children: [
          Image.asset(
            imageAddress,
            fit: BoxFit.cover,
          ),
          const Icon(
            Icons.play_circle_fill,
            size: 64,
            color: Colors.white,
          ),
        ],
      ),
    );
  }
}

class VideoPlayerScreen extends StatelessWidget {
  final String videoId;

  const VideoPlayerScreen({required this.videoId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.black),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: SvgPicture.asset(
          'assets/images/itiq-logo.svg',
          width: 150,
          height: 40,
        ),
        centerTitle: true,
      ),
      body: Container(
        color: Colors.white,
        child: Center(
          child: YoutubePlayer(
            controller: YoutubePlayerController(
              initialVideoId: videoId,
              flags: const YoutubePlayerFlags(
                autoPlay: true,
                mute: false,
              ),
            ),
            showVideoProgressIndicator: true,
            progressIndicatorColor: Colors.amber,
            progressColors: const ProgressBarColors(
              playedColor: Colors.amber,
              handleColor: Colors.amberAccent,
            ),
          ),
        ),
      ),
    );
  }
}

The version of the YouTube player I used is --> youtube_player_flutter: ^8.1.2

Things I have tried are;

Ensuring that the Video ID is correct and trying out different IDs aswell but no change
Ensuring that my app has internet connection by placing this in the android manifest <uses-permission android:name="android.permission.INTERNET"/>.

I tried using "A3ltMaM6noM" as this video ID, and it worked. What video ID have you been using? — Dharam Budh, Aug 31 '23 at 12:08
Yeah, you are right the issue was with the VideoID... I somehow misspelled multiple video IDs. Now the code is working as expected. Thank you — Abel Moremi, Aug 31 '23 at 13:36

score 1 · Answer 1 · answered Aug 31 '23 at 12:16

Try & test this code and inform me whether it is working or not working.

I attached the view proof that the below-mentioned code is working on my machine. View

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ElevatedButton(
          onPressed: () async {
            await Navigator.push(
              context,
              MaterialPageRoute<void>(
                builder: (BuildContext context) {
                  return const VideoPlayerScreen(videoId: "A3ltMaM6noM");
                },
              ),
            );
          },
          child: const Text("Play"),
        ),
      ),
    );
  }
}

class VideoPlayerScreen extends StatelessWidget {
  const VideoPlayerScreen({required this.videoId, super.key});
  final String videoId;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: YoutubePlayer(
        controller: YoutubePlayerController(initialVideoId: videoId),
      ),
    );
  }
}

Video wont load while using the youtube_player_flutter package

1 Answers1