[FIXED] So füllen Sie die Breite des eingebetteten Facebook-Videos in seinem Container mit ReactPlayer

Ausgabe

Ich möchte meiner NextJS-App ein eingebettetes Video hinzufügen. Ich verwende ReactPlayer, aber es scheint, dass Facebook die Breite = “100%” nicht unterstützt, denn mit YouTube funktioniert es gut, aber wenn ich ein Facebook-Video verwende, springt es immer auf 500 Pixel zurück. Jeder weiß, was los ist.

Auch wenn ich in de DOM gehe und die Breite 500px auf width: 100% im Inspektor ändere springt es wieder auf 500px zurück.

<ReactPlayer
            ref={videoRef}
            controls={true}
            width="100%"
            height="100%"
            url="https://www.facebook.com/PACMANCOMMUNITY/videos/922852058607774/"
            playing={playing}
            muted={muted}
            onDuration={durationHandler}
            onProgress={progressHandler}
            config={{
              youtube: {
                playerVars: { showinfo: 1 },
              },
            }}
          />

Lösung

Das Problem war also, dass ich den Reactplayer bedingt gerendert habe, wenn ich nicht bedingt gerendert habe, nahm er seine volle Breite an.

Beantwortet von – Mike

Antwort geprüft von – David Marino (FixError Volunteer)