Zoom functionality in media player element: Linking derived media transport controls and media player element

Question

I want to add zoom functionality for media player element(UWP C#) . I placed MediaPlayerElement inside a scroll viewer and zoom functionality is working. But inbuilt media transport transport controls is also getting zoomed and scrolled.
To avoid this I created a derived transport control as described in https://learn.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/custom-transport-controls#create-a-derived-control
I assume instead of using inbuilt transport controls and instead use the derived transport control(added outside the scroll viewer) I can have a zoom feature for media player element.

How do I link the DerivedTransportControls with the media player element(so that if I press pause button in my derived control, it automatically pauses the media player.Similar to how the inbuilt controls work)
I tried linked derived media transport controls with media player element as below.
mpe.TransportControls = derivedmtc;
The above causes an exception: System.ArgumentException: 'Value does not fall within the expected range.' Am I missing something?
Is it possible to link derived media transport controls with a media player element. Otherwise it seems I have to implement my own custom transport controls and all the features(like auto hide, seek bar etc)