search

egozen-garage / radioalhara.com

0 stars 0 forks source link

add video as background #9

Open valid-void opened 2 years ago

valid-void commented 2 years ago

npm install react-player

"A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion and Kaltura."

https://www.npmjs.com/package/react-player

valid-void commented 2 years ago

youtube video can be embeded now

simply copy the a youtube video url and paste it here:

https://github.com/egozen-garage/radioalhara.com/blob/f2d139cf9b3e9ad486fe2fa89eb03fe4d4e6262d/src/components/background/VideoBackground.js#L25-L28

the code above also defines to auto-start, loop and mute the video

performing zoom-in

In order to hide youtube-player-information (e.g. youtube logo & video title) the app performs a little zoom-in. With this method we can also manage to dissolve black bars that might appear if the video format does not match the display format. downside: borders of video are cut off

responsible css: https://github.com/egozen-garage/radioalhara.com/blob/f2d139cf9b3e9ad486fe2fa89eb03fe4d4e6262d/src/components/background/videoBackground.css#L42-L45

valid-void commented 2 years ago

vimeo video

vimeo does not response the same way like youtube videos. the css still needs to be extended, to add vimeo videos