How to get exact width and height of video being played?
See original GitHub issueCurrent Behavior
I need to get the exact width and height of the video element inside the React Player, I expected payerRef.current.clientWidth
and payerRef.current.clientHeight
to work but these properties are missing.
Expected Behavior
Being able to use clientWidth
and clientHeight
properties on the playerRef.
Other Information
I need to get this information because I’m creating a drawing canvass over the videos. The problem that I face is that some videos come on portrait mode so the scaling is different and the wrapper I created scales at a different rate than the video making the drawings shift position on different screen resolutions.
Issue Analytics
- State:
- Created 2 years ago
- Comments:6 (1 by maintainers)
Top Results From Across the Web
HTML5 Video Dimensions - javascript - Stack Overflow
I am getting values of 100 for both width and height, and video doesn't have 100px. Not sure why... – Mikel. Jul 22,...
Read more >Fluid Width Video | CSS-Tricks
Let's cover how to make them all fluid width while maintaining an appropriate height based on their aspect ratio. In each of these...
Read more >How to set the height and width of the video player in HTML5
Approach: The HTML5 width and height attributes of the video tag are used to set the height and width of the video player...
Read more >Optimal Video Dimensions - Video Cloud Studio Documentation
Recommended width and height for videos with 16:9 aspect ratios ; 1920 x 1080, 1792 x 1008, 1856 x 1044 ; 1280 x...
Read more >HTML video width Attribute - W3Schools
The width attribute specifies the width of a video player, in pixels. Tip: Always specify both the height and width attributes for videos....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This does not work for Vimeo as of 2022
player.videoHeight
returnsundefined
I’ve found that this also works!
const player = videoRef.current.getInternalPlayer();
console.log("videoHeight", player.videoHeight);
console.log("videoWidth", player.videoWidth);
wherevideoRef
is theref
ofReactPlayer
element.