How to Create a Video Background Component in React JS - With a Background Overlay

Подписаться 42 тыс.

Просмотров 118 тыс.

50% 1

Quick video background tutorial for React JS. Really it's the same as a static HTML/CSS website, I've just been learning React lately so that's what I built it in! Hope you like it - drop me a comment below!
ZeroTo Mastery:
- Master React JS Course - bit.ly/Learn-R...
- Complete Web Developer in 2023 - bit.ly/Complet...
Coding Challenges!
bit.ly/Code-Ch...
GitHub Repo!
github.com/fir...
☕ Buy me a Coffee ☕
www.buymeacoff...
Instagram 💪
/ fireclint
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj

Опубликовано:

26 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 149

@chooseyourtool 8 месяцев назад

Of the many videos I've watched, this is the only one with a css that positions the video correctly. Well done and many thanks for that!👍 (you got a like and a subscriber)

@_chrxtopher 7 месяцев назад

This is exactly what I was looking for, a quick and easy tutorial. Thanks so much!

@youngwolf1009 Год назад

I have discovered your channel very recently, i'm practicing react js right now and i really start to believe that your an angel and god sended you for me cause i was stuck hahaha Thank you very much

@codecommerce Год назад

Thank you my friend!

@astralmaster1692 5 месяцев назад

your videos always work the first time for me for some reason.

@bruhmoment3731 4 месяца назад

this is just awesome. no BS. very clearly explained.

@codecommerce 4 месяца назад

Glad you liked it!

@jonathanpadoa8987 Год назад

Super helpful dude and very short and concise. Thats awesome. Cheers

@codecommerce Год назад

Thanks Jonathan!

@AzizMamadiorov 8 месяцев назад

very necessary and timely

@codecommerce 8 месяцев назад

Glad you think so!

@lalamax3d Год назад

i love precision of this video. clean / concise , to the point. bhai waah.......

@codecommerce Год назад

Much appreciated!

@elyeskacem4784 Год назад

Thanks RU-vid for recommending such a brave channel like this, you saved my project, +1 subscriber

@codecommerce Год назад

Thanks!

@ViacheslavYahorlytskyi 7 месяцев назад

But there I have one bug. My bg-video was opened on full screen on real mobile devices just as video playing started.

@MobileLegends-d8z Месяц назад

maybe pointer-events: none; just maybe. describe the problem more maybe i can help

@고혁-m8b 2 года назад

Thank you for creating these wonderful tutorials. Learning tons from your channel :)

@codecommerce 2 года назад

Thanks! You're very welcome!

@SabareshKrishnan Год назад

Well organized and excellent walkthrough! Great job.

@codecommerce Год назад

Thank you!

@Ajay-singh666 2 месяца назад

Thank you Sir for this video keep posting keep growing

@codecommerce 2 месяца назад

Always welcome

@kristofs8893 6 месяцев назад

You are the man! Thanks for the upload, saved me some headache for today!

@havila1906 2 года назад

Great video! It is also a good idea to position the parent container as relative when not trying to fill the entire viewport

@codecommerce 2 года назад

Thank you Humberto

@fern4023 2 года назад

thanks!! needed this when adding in a navbar!

@mariusthgersen512 Год назад

This comment was very helpful. Thank you!

@Shrimant-ub4ul Год назад

Learned a lot from you , thank u so much sir 🙏

@codecommerce Год назад

Thank you!

@naqeebullah5406 Год назад

Thanks, that what I want in my website using react.

@codecommerce Год назад

They look great!

@smiling_assasin Год назад

thanks for the video manh, i was looking for something like this so that i can work on my personal portfolio, this helped me... 😃

@shahiruroshen837 7 месяцев назад

This tutorial is just wow ❤️

@mrnabby4178 Год назад

Thanks man you are awesome.

@codecommerce Год назад

Thank you!

@christianzelioh552 Год назад

First time coming to your channel and i want to thank you for this tutorial

@codecommerce Год назад

Thank you sir!

@harsh8462 2 года назад

you never dissapoints bro i find your tutorials cuz thats the solution to my problem :)

@codecommerce 2 года назад

Thanks man!

@jawadsadman3205 Год назад

thanks

@juguetestoys1137 2 года назад

Great as always!!

@codecommerce 2 года назад

Thanks again!

@p1k1m4ru Год назад

it was ultra good! aweosme vidoe man!

@laurel4181 2 года назад

This video was amazing! Thanks so much.

@codecommerce 2 года назад

Thank you so much laurel!

@safaamorri Год назад

Great video! thks

@codecommerce Год назад

Thank you Safa

@plujudramunqk 2 года назад

Great video man. Thank you

@codecommerce 2 года назад

Thank you!

@utkarsh3vedi Год назад

thank you sir worked really well.

@AbhishekMishra-ki9jr 9 месяцев назад

thank you so much sir..

@matihadian 9 месяцев назад

super helpful, thanks

@nicholasbazzoni7084 Год назад

this guys videos are great

@codecommerce Год назад

Haha thanks dude!

@ShredNekM80 Год назад

This helped me a lot! Thanks :)

@codecommerce Год назад

Any time! Thanks dude!

@monirhossainrabby7259 2 года назад

Thank you so much for this content. Keep it up.

@codecommerce 2 года назад

Thank you Monir!

@vuralarslandemir3163 2 года назад

That is awesome. Thank you

@codecommerce 2 года назад

Thank you my friend!

@NNNedlog Год назад

This was very easy to follow along with. Thanks a lot

@codecommerce Год назад

Thank you!

@bagioo1 9 месяцев назад

thank you sir very helpfully

@dpka07 Год назад

thanks for your video,it is very helpful.

@marinasatsyk2184 2 года назад

Thanks a lot!!!!! it's very useful

@Cyandog 2 года назад

THIS IS SO GOOD! Thank you so much for the content man! 1 more sub for sure!

@codecommerce 2 года назад

Wow dude that’s awesome! I’m glad you liked it. Thank you Brainon.

@supakritjulamanee3641 10 месяцев назад

thank you bro

@frankyfurtado5789 2 года назад

Nice! Thanks

@demavares 2 года назад

Oh man, it is fantastic. Great video. Saludos of Venezuela. Followe you.

@codecommerce 2 года назад

Thank you Darwin!

@floppyears788 7 месяцев назад

Great video! Thanks a lot. I have a questionn though, I got it working, but when I added the content on top of the video, the video stopped playing

@LearnEnglish_1 5 месяцев назад

Good job!

@sostine_waliaula 2 года назад

it worked thanks, i was only missing the muted property

@codecommerce 2 года назад

Awesome!!

@eshw23 2 года назад

What's up man, its inspirational to see someone be so good at coding while also having a family and being insanely jacked, any tips on how you got to this point? I'm coding so much but still feel like im struggling on the smallest things, thanks.

@codecommerce 2 года назад

Haha thanks dude! I wouldn’t necessarily say I’m good at coding! I’m 35 so I’ve had some years to progress, but I didn’t get serious with coding until the last 1-2 years or so.

@shariqueansari9439 Год назад

Thanks dude❤️

@codecommerce Год назад

No problem 👍

@molaraiche 2 года назад

Thank you so much

@TasnimulFahim 11 месяцев назад

Thanks man.

@sylviaboyani1707 2 года назад

Thanks Code Commerce

@Kristina-lj3bo 2 года назад

Thank you sir !!! 😎

@codecommerce 2 года назад

Thank you Kristina!

@hamzamuhumed8137 Год назад

You're the goattttt

@Trueformweb Год назад

Keep in mind that this video will probably not work in production build on mobile. It won't play first time you open the home page and after it fully loads it will open as it's a Netflix movie with default controls at the bottom.

@Mahmoud_176 Год назад

Thank you

@ruslanyusupov793 2 года назад

Thanks, lesson is useful.

@codecommerce 2 года назад

Thank you Ruslan

@olgam4605 2 года назад

Thank you 🙏🏿

@codecommerce 2 года назад

You are so welcome

@AnthonyHeimlich Год назад

Fucking awesome, keep it up!

@agustincruz7840 Год назад

Another great video! direct to the point, thank you! But a question just show up.... what about the size of the video, when you deploy it, how you make it fast load?? thaaaaaaanks!

@codecommerce Год назад

Hi Agustin, I suppose it would depend on a few things. The size/length of the video.

@agustincruz7840 Год назад

@@codecommerce Yes, I am agree, but the thing is... how? haha, I know that is a good video idea 😋

@muhamadilhan430 Год назад

Really2 amazing dude

@igorekupaev1134 Год назад

@codecommerce Год назад

Thank you!

@StevenIsaac-vq1yr Год назад

I'm trying to-do something similar with and auto trigger to load home page after the video is finished it acts like a splash screen before anyone enters the main site. Is there a way I can do this with this process

@ebenezerayola3211 Год назад

Thank you pal for this video, how do I allow sound to the video?

@shaxzodshaxzod2506 2 года назад

Assemble an e-commerce site in React programming language. Next lesson will be fun for us.

@codecommerce 2 года назад

Thanks man will do!

@QuincyWilliams-m8s Год назад

This video is amazing. Can you do one for a mobile environment?

@persnare1067 2 года назад

Hey man, thanks for the tutorial. Can't get the "rafce" functional component command to work. Any idea what I'm missing?

@KNB_KBTU 6 месяцев назад

bro how do you solve error with autoplay in safari ?

@vincentvalade7773 Год назад

Hi man ! nice tutorial, but for me the video never plays when i refresh the page :/ any solutions? Thannnks :)

@vincentvalade7773 Год назад

just found the answer :) needed useEffect 👌👌

@aymantarek9739 2 года назад

thx man

@codecommerce 2 года назад

Thanks dude!

@mariannamontano3731 2 года назад

thanksssss

@camiilaa1679 2 года назад

Thanks, good video! New sub here!

@codecommerce 2 года назад

Thanks for the sub!

@fjj813 2 года назад

thank you🙏🏼. is it possible to do an e-commerce project?

@codecommerce 2 года назад

Yes, absolutely. Maybe with React w/ Shopify or MERN.

@eQ-13 2 года назад

I second that. With e-commerce, so many important concepts are covered

@sudhanshumishra5796 2 года назад

@@codecommerce please please do a e-commerce

@robbiemroz5898 2 года назад

i have a navbar that i am trying to put on the top of the page but cant click it with the video there, how do i fix this

@robbiemroz5898 2 года назад

nevermind seems i have figured it out by making position relative on just the video part

@maxvoleanin570 Год назад

hey,can you please help me I do the exact same thing and I keep getting a scroll bar how do i fix it?

@codecommerce Год назад

I’ll post a link, should be in my GitHub ;)

@FOTROXIC 2 года назад

Very helpfull I just subscribed. Do you have tutorial how to import map with google api for react js?

@codecommerce 2 года назад

I don’t have one filmed, but I sure can!

@yourmememajesty Год назад

Love your videos man super helpful! I just deployed a website with a Hero Video background just like this but the video isn't playing on mobile... any ideas?

@codecommerce Год назад

Hmm is it working on smaller breakpoints on the desktop?

@yourmememajesty Год назад

@@codecommerce I managed t0 figure it out in the end! I just needed to add playsinline="true" and it's all good. Thank you :)

@rafaelfael6740 2 года назад

the funny thing is that the background video is the barracks where I served

@codecommerce 2 года назад

That is awesome dude

@nayanendusanthosh8255 9 часов назад

Thank you!

@MillaAmedun Год назад

how coud add video back ground in next js?

@codecommerce Год назад

Same way :)

@ataraxia8097 2 года назад

what's the difference of putting the video in assets vs public?

@codecommerce 2 года назад

Yes technically they should be fine in either spot. That is how I am use to structuring my apps.

@ambitionhut 2 года назад

How can i put the video behind a component in tailwind mate? I'm struggling with this ):

@codecommerce 2 года назад

You just need to position the content "absolute". You can add an overlay or any other time of element.

@ambitionhut 2 года назад

@@codecommerce funny thing is i watched another of your videoes that had the solution 🙏

@unboxinggadgets4105 2 года назад

Hi sir, pls make a video on how to add whatsApp custom chat box in reactjs website

@codecommerce 2 года назад

That's an awesome idea man!

@traveleractual Год назад

Not great for a beginner, I've watched this several times and I believe you've got things added to vscode that maybe I don't. For example, after creating Main.jsx you type 'rafce' and you get the functional component, but when I type 'rafce' that wants to expand as 'ReadableStreamDefaultController