Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
YouTube Video as Background in React (github.com/debdut)
30 points by debdut on March 27, 2022 | hide | past | favorite | 21 comments


Not trying to be rude, I am genuinely curious how a niche, low quality project like this is the 11th post on HN?


Simple, because of HN's algorithm and population at this time of day. It probably got, due to pure random chance, a couple votes in quick succession, something which is rare at the start of the day, so it got promoted to the front page in case it's a smashing piece of news.

It'll decay over time, but sometimes this has the adverse effect of promoting not-as-interesting posts just because they had a chance of a spot on the front page, attracting more upvotes, while many very interesting articles never got enough time to be upvoted and are lost.

I quite like HN's algorithm, but this is one major flaw of upvote-based systems.


Why low quality?


- no documentation, not even a few lines

- no example without cloning

- example provided doesn't run without modifying it (empty video url)

- no tests

- doesn't look maintained (e.g. 3 years old typescript version)

Then looking at index.tsx

- using Class as component (debatable but really not idiomatic anymore)

- weird empty lines and spaces

- weird `this.container` pattern, not to mention the type of it is unsafe

- `aspectRatio` has to be in `x:y` format (including the colon), no way to know that unless you read the code in depth (also weird choice)

- using the anti-pattern of setting derived state (aspectRatio) in this.state, rendering again with a different aspect ratio won't work

- componentWillUnmount does not remove the listener, as calling `.bind` there will create a function that doesn't match the one in componentDidMount

- using `.bind` inline insted of using fat arrows directly when creating class methods

- the weird syntax for `playerProps =`

- hard coding some of the `PlayerVars` props instead of just makin props `PlayerVars & { ... }` to allow passing any props supported by react-youtube

Anyway that's just at a glance, I'm sure cloning the project and trying to use it would reveal a lot more.


46k lines of code for this


If I should point to something that isn't very good is the placeholder test, but the code is ok to me.


I count 213 JS + 41 CSS = 254 lines



You forget the dependencies.


of course.. :-)

I'm not sure what we're talking about here because it's not very obvious where this number comes from. Is it the YouTube API, excluding React?

If you're thinking of using a React library, we have to assume you're already using React.

Mentioning line count is useless unless you're someone intending to explicitly manage that code. But if so, why stop at 40k?

It seems more constructive to talk about the size impact in megabytes or loading time of requiring the YouTube API just to have video playing in the background vs just just hosting your own static video alongside the html. Of course assuming you already use React.


It would be nice to have a downvote button on stories, even if it does nothing.


Do we really need react for this ? Also it looks like there are thousands of LOC for just this


You certainly don't need react to embed a youtube video in a background.. this library provides a react component that does this, which is useful to react users who want this effect.


The amount of code used here to do something so simple is absolutely staggering. This library abstracts over youtube-react, which abstracts over youtube-player, which abstracts over the Youtube API itself, each one proving hundreds or thousands of LoC.

This is a serious dependency sandwich. If you want to put a single Youtube video in the background of a div then you don't need thousands of lines of code for managing player controls and state changes. You could probably take 1/10th of that code in youtube-react (the bit that integrates a react component with a 3rd party lib that wants control over the DOM, common pattern with React) and get the same result.


What you are saying is a worthy fault for a front end library, but it’s kind of funny that no one thinks this way when it’s the backend.

To do a simple k-means clustering on a textual corpus, someone might pull in all of scipy and ntlk which is tens of thousands of lines of code.

I think programmers don’t generally consider dependency size unless it’s on the order of multiple gigabytes.


I suspect a lot more LoC are fetched when you visit youtube anyway, even if it is edge-optimized


You just described the entire pantheon of modern development tools.


How about everyone who isn't impressed just don't upvote it or comment and let the algorithm work


Would be nice to have a link to an example.


Can you reliably autoplay video and audio in current browsers?


i figured out it should work if it starts out muted




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: