How to add text watermark on YouTube player iframe in fullscreen mode

Question

I'm working on an educational app (something like Udemy) that was built with Flutter. I need to add a text watermark on the YouTube player iframe.

I'm using stack widget to put the text over video player, and it's working fine in normal mode, but I don't know how to do it in fullscreen. Can I do it with stack widget or any other way?

Answer 1

try this solution : first wrap your player with stack like this :

   Stack(
                  children: [
                    YoutubePlayer(
                      controller: _controller!,
                      progressColors: const ProgressBarColors(
                        playedColor: Colors.amber,
                        handleColor: Colors.amberAccent,
                      ),
                    ),
                    const WaterMarkWidget(
                      text: "water mark text",
                    )
                  ],
                ),

and here is the WaterMarkWidget :

---

    import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';

class WaterMarkWidget extends StatefulWidget {
  const WaterMarkWidget({super.key, required this.text});
  final String text;

  @override
  State<WaterMarkWidget> createState() => _WaterMarkWidgetState();
}

class _WaterMarkWidgetState extends State<WaterMarkWidget> {
  late Timer timer;
  double topPadding = 0;
  double downPadding = 0;
  int durationTime = 10000;
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      timer = Timer.periodic(Duration(milliseconds: durationTime), (__) {
        double w = MediaQuery.of(context).size.width * .3;
        double h = MediaQuery.of(context).size.height * .3;
        topPadding = Random().nextDouble() * h;
        downPadding = Random().nextDouble() * w;
        setState(() {});
      });
    });
  }

  @override
  void dispose() {
    timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: topPadding,
          left: downPadding,
          child: AnimatedContainer(
            duration: Duration(milliseconds: durationTime),
            padding: EdgeInsets.only(top: topPadding, left: downPadding),
            child: Center(
              child: Text(
                widget.text,
                style: TextStyle(
                  fontSize: 15,
                  fontWeight: FontWeight.bold,
                  color: Colors.black12.withOpacity(.06),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}