Iframe progressive enhancement Does not work / is not properly documented

Trying to wrap a SoundCloud iframe using this library but there appear to be 2 problems:

there is no documentation about how to do this in this Git repo (find all issues or readme iframe, soundcloud, embeds, progressive enhancement yields 0 results) or whether it's at all possible
while it works using the normal div class="plyr__video-embed" id="player" > iframe src="soundcloud-url-here", it does not work with the ngx-plyr variant. Nor is it described anywhere whether it does (not) work. Also using the 'old' plyr method, i cant seem to access the plyr js Object to control it. Reffing the iframe or wrapper does not allow access to plyr methods.

It simply shows a black screen and appears to misinterpret the iframe for what i can see. It logs no errors either, so I have no clue what is going wrong.

example NOT working (access to plyr but no video appears, black screen no errors)


<div class="plyr__video-embed" id="player"
plyr
plyrTitle="Synk"
[plyrPlaysInline]="true"
(plyrInit)="initPlayer($event)"
(plyrEnded)="mediaEnded.next(true)"
(plyrCanPlay)="onCanPlay()"
(plyrLoadedData)="onLoadedData()"
(plyrReady)="onReady()"
(plyrTimeUpdate)="onTimeUpdate($event)"
(plyrError)="onError($event)"
>
  <iframe [src]="(iframeSrc$ | async) | safeUrl" frameborder="0"></iframe>
</div>

Sorta working, but cant control it (plays, but no access to plyr methods)

<div class="plyr__video-embed" id="player" >
  <iframe [src]="(iframeSrc$ | async) | safeUrl" #plyrComp></iframe>
</div>

Also is this thing still maintained?

Thanks

smnbbrv / ngx-plyr

Iframe progressive enhancement Does not work / is not properly documented #105