I'm trying to display a trailer on my website. I use react-player library to embed YouTube videos. The default video player size is rather small, and I wanted the same size as displayed on the original YouTube website. I went to tweak the parameters in the component. Below is my code:
<ReactPlayer className="trailer-player"
url="https://www.youtube.com/watch?v=BIhNsAtPbPI&ab_channel=JamesBond007"
id='player'
muted={mute}
playing
loop
width={"100%"}
height={"100%"}>
</ReactPlayer>
It did change the size. However, it only changed the size of the video player itself, and not the contents of the video. What I got was a bigger video player and the same size video. How do I make the size of the video player itself the same as what's shown on YouTube. If there is a html iframes solution to this I would use it too, since react-player library is just an easier implementation. Thanks in advance!