Can't load src dynamically

[Gricardov]

Hi team. I'm loading urls dynamically when I click a button. However, the player loses its custom UI.

Expected behaviour

The player should keep its UI when I update the src of the iframe

Actual behaviour

The player shows the tipical YouTube UI

Steps to reproduce

This is the code I'm using on React. The links are updated inside a hook

useEffect(() => { const episode = episodes.find(episode => episode .id === activeId); if (episode ) { setVideoUrl(https://www.youtube.com/embed/${urlVideo}?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1); } }, [activeId, videoUrl])

Environment

• Browser: Google Chrome
• Version: 87.0.4280.88 (64bits)
• Operating System: Windows 10
• Version: 10.0.18363 build 18363

Console errors (if any)

Link to where the bug is happening

[ametthey]

Nobody found a solution for this ? I'm trying to achieve the same thing, well kinda, for a wordpress site where I get my youtube ID from a URL and then I do the same as the estUrlVideo function above but it's not working @sampotts did you encounter anything related ?

Thanks a lot for the answer ! :D

[amaank404]

Same here trying to use load method (to reload a video for scaring a person with horror video) but that is not available with plyr but it is available with default video tag

/cc: @sampotts

[Gricardov]

Hi chamos, good news! I actually found a solution months ago. This is the sample file: https://github.com/AcademiaTemple/website-react/blob/master/src/pages/course-player.js

And this is the live result: https://academiatemple.com/course-player/?id=IrnTmomFcr5EGtcMVFGd&episode=3UJBFdPBQuLjGAwxAuN4

You are welcome!

[amaank404]

so solution is to create a new plyer and replace it with original object.

[amaank404]

but anyways it would be just better if it was builtin to reload. Thanks for the workaround 😄