react-player not working with react server side rendering

Hi, trying to render server side a simple component that uses react-player and it doesn’t seem to be working.

Route handler looks like this:

const ServerPost = (props) => (
          <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing />
        );
        var html = ReactDOMServer.renderToString(
          React.createElement(ServerPost, post),
        );
        reply(html);

DOM element looks like this:

<div style="width:640px;height:360px;" data-reactroot="" data-reactid="1" data-react-checksum="-1272364945">
   <div style="height:100%;display:block;" data-reactid="2">
      <div id="youtube-player-0" data-reactid="3"></div>
   </div>
</div>

[danmo]

Hi @CookPete , shouldn’t the iframe be added to the generated html then ?

[j4-m]

Hey @cookpete I know this is a reeeeeeally old issue however I do think that a lack of basic SSR is a problem. For sites which use the video thumbnail for their LCP then CSR of the background-image is going to result in massive performance problem. Would you be willing to accept a PR which adds SSR support for the preview\thumbnail markup?