How to create transparent image overlay with GStreamer?

Question

I try to overlay a cross-hair with transparent background on top a playbin video, but could not get the video to display. I found a few similar questions but the answers do not work (probably something has changed since they were posted. I tried the original code in these answers and they didn't seem to work). Per https://bugzilla.gnome.org/show_bug.cgi?id=663589, I set the alignments, but the app only show the overlayed image not the video.

#!/usr/bin/env python3
import sys
# gtk libs (GUI).
import gi
gi.require_version("Gtk", "3.0")
gi.require_version('GstVideo', '1.0')
gi.require_version('Gst', '1.0')

from gi.repository import Gtk
from gi.repository import Gst
from gi.repository import GstVideo
from gi.repository import GdkPixbuf

def on_realize(widget, player):
    print(f'on_realize - check playbin: {player.get_name()}')

    window = widget.get_window()
    window_handle = window.get_xid()

    # pass it to playbin, which implements XOverlay and will forward
    # it to the video sink
    player.set_window_handle(window_handle)


class Video:

    def __init__(self):
        # initialize GTK and GStreamer
        Gtk.init(sys.argv)
        Gst.init(sys.argv)

        # Setup GStreamer 
        player = Gst.ElementFactory.make("playbin", "testplaybin")
        player.set_property("uri", "https://www.freedesktop.org/software/gstreamer-sdk/data/media/sintel_trailer-480p.webm")

        win = Gtk.Window()
        win.set_position(Gtk.WindowPosition.CENTER)

        # Add overlay box.
        overlay = Gtk.Overlay()
        win.add(overlay)
        overlay.set_size_request(700, 500)

        # Add drawing area to overlay box.
        videowidget = Gtk.DrawingArea()
        videowidget.connect("realize", on_realize, player)
        overlay.add(videowidget)
        #videowidget.set_halign (Gtk.Align.END)
        #videowidget.set_valign (Gtk.Align.END)

        # png image with a cross at the center and transparent background.
        pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size("crosshair.png", 700, 500)
        img = Gtk.Image()
        img.set_from_pixbuf(pixbuf)
        overlay.add_overlay(img)
        # Set alignment per https://bugzilla.gnome.org/show_bug.cgi?id=663589
        img.set_halign (Gtk.Align.END)
        img.set_valign (Gtk.Align.END)

        print("playing video clip ...")
        player.set_state(Gst.State.PLAYING)
        win.show_all()


if __name__ == "__main__":
    Video()
    Gtk.main()