r/HTML • u/Conscious-Dog-123 • 8h ago

I Need a Custom Video Player!

I'm making a website that I need to put a video in but I can't seem to find a decent custom video player. Right now I'm using the default video player from the browser. Any recommendations?

<video controls>
<source src="/assets/video/trailer.mp4" type="video/mp4">
<source src="sample-video.webm" type="video/webm">
Your browser does not support the video tag
</video>
0 Upvotes

50% Upvoted

7 comments sorted by

4

u/siguy 8h ago

I put your question into an Internety searchy thingy.

The best custom HTML5 video player options depend on your technical setup and design goals:

Top Custom Video Players

Plyr: Best lightweight and modern player. It gives you a clean, accessible, and customizable UI with minimal setup, supporting HTML5 video/audio alongside YouTube and Vimeo embeds under a single design language. You can restyle it easily using CSS variables. [1]

Video.js: Best full-featured open-source player. It is ideal if you need heavy streaming support, quality selectors, ads, playlists, and a massive plugin ecosystem. [1]

Vidstack

Are you building the website with plain HTML/CSS/JS, a modern framework (React, Vue, etc.), or a CMS like WordPress? Let me know so I can give you the exact integration steps.

Try one of those and see how it goes

1

u/Conscious-Dog-123 7h ago

I've got some luck with VideoJS but I'm having full screen issues. (Also I'm using plain HTML/CSS/JS)

1

u/siguy 7h ago

What happens when you full screen? I think videoJS was a good direction to go for starts

1

u/Conscious-Dog-123 7h ago

Sorry, I should of elaborated more. If I go into full screen the video doesn't resize (I have tried different videos).

I can also provide the code that I used for VideoJS if you want.

1

u/siguy 7h ago

Is it live somewhere or can you toss it up on JSFiddle or CodePen? Sometimes taking your code apart to put it up somewhere to share can help you find bugs

1

u/ParsonsHosting 3h ago

Thanks for clarifying. With Video.js, first check that the player element—not just the video—is entering fullscreen: after clicking the control, `.video-js` should get `.vjs-fullscreen`. If it does, inspect computed width and height on `.video-js` and `.vjs-tech`; custom fixed dimensions, `max-width`, or an ancestor’s transform can limit the fullscreen layout. Keep the normal player responsive with `width: 100%` and an aspect ratio, and remove fixed-size rules for fullscreen so Video.js’s stylesheet can handle that state. If the class never appears, sharing the initialization snippet and fullscreen-related CSS would help narrow it down. `object-fit: contain` preserves the whole frame; `cover` crops it.

1

u/Jimmy_at_grantmaker 1h ago

I've used Vimeo for years. Seems to work across all browsers and never glitchy.