Light mode + responsive videos + styled components - any pointers?

[hanno-jonlay]

I've got the component working smoothly and integrated with styled-components to set up the responsive player.

import React from 'react'
import ReactPlayer from 'react-player'
import styled from 'styled-components'

const VideoWrapper = styled.div`
  position: relative;
  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
`
const Video = styled(ReactPlayer)`
  position: absolute;
  top: 0;
  left: 0;
`
function VideoEmbed({ url }) {
  return (
    <VideoWrapper>
      <Video width="100%" height="100%" url={url} />
    </VideoWrapper>
  )
}

export default VideoEmbed

My problem is that while styling works nicely without light mode, as soon as this parameter is passed, we run into styling issues:

I see how you describe how to override the .react-player__preview classes and similar in the documentation, but can't see how to easily implement that in this situation.

I suspect this is my own inexperience with styled-components (which I'm relatively new to) - wondering if you have any quick pointers for achieving the required effect without resorting to a class inside a global CSS file, or replicating the light mode myself.

[hanno-jonlay]

Thanks @cookpete - works nicely! Appreciate you taking the time to figure out a fix.