Plyr doesn't work on next.js 14

[timomedia]

I use Plyr on next.js 14 and get the error "document is not defined". Previous versions all worked fine, only when upgrading to next.js 14 did I encounter the above error. Specifically, the error appears as below. Please help me check it

⨯ node_modules\plyr\dist\plyr.min.mjs (1:7201) @ document
 ⨯ ReferenceError: document is not defined
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at eval (./components/player.tsx:11:68)
    at (ssr)/./components/player.tsx (\.next\server\app\[movie]\page.js:249:1)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at eval (./app/[movie]/movieDetail.tsx:7:76)
    at (ssr)/./app/[movie]/movieDetail.tsx (\.next\server\app\[movie]\page.js:194:1)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)

null

[Uurtsaikh Nyambat]

Make it client component and use dynamic import

const Plyr = dynamic(() => import("plyr-react"), { ssr: false });