Youtube value doesn't effect to conditional branch, but only if I hot reload the page

Question

I wanted to try change text color depends on youtubeController.value.position,but only if I hot reload the page. Why? Can you guide me please?

Also, youtubeController.value.metadata.title doesn't show up until youtube plays. How does title show up on default?

Thank you in advance

import 'package:youtube_player_iframe/youtube_player_iframe.dart';

class TestYoutubeValue extends StatefulWidget {
  const TestYoutubeValue({Key? key}) : super(key: key);

  @override
  _TestYoutubeValueState createState() => _TestYoutubeValueState();
}

class _TestYoutubeValueState extends State<TestYoutubeValue> {

  late YoutubePlayerController youtubeController;

  @override
  void initState() {
    super.initState();
    youtubeController = YoutubePlayerController(
      initialVideoId: 'fusYPr1KF_w',
      params: YoutubePlayerParams(
        mute: false,
        enableCaption: false,
        showControls: true,
        showFullscreenButton: true,
        privacyEnhanced: true,
        interfaceLanguage: 'ja',
        desktopMode: false,
        useHybridComposition: true,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          YoutubePlayerControllerProvider(
            controller: youtubeController,
            child: YoutubePlayerIFrame(
                aspectRatio: 16 / 9,
              ),
          ),
          YoutubeValueBuilder(
            controller: youtubeController,
            builder: (context, value) {
              return Column(
                children: [
                  Text(youtubeController.value.position.toString()),
                  Text(youtubeController.value.metaData.title),
                ],
              );
            },
          ),
          GestureDetector(
              onTap: () {
                youtubeController.seekTo(Duration(seconds: 3));
              },
              child: Text(
                '0:03',
                style: TextStyle(
                  color: youtubeController.value.position > Duration(seconds: 3)
                      ? Colors.red
                      : Colors.black,
                  fontSize: 20
                ),
              )
          ),
          GestureDetector(
              onTap: () {
                youtubeController.seekTo(Duration(seconds: 9));
              },
              child: Text(
                '0:09',
                style: TextStyle(
                    color: youtubeController.value.position > Duration(seconds: 9)
                        ? Colors.red
                        : Colors.black,
                    fontSize: 20
                ),
              )
          )
        ],
      ),
    );
  }
}