Full Screen Video Background - HTML & CSS 

aye this is clean! anyone else learning front end?

How the hell you know so much? I started watching you when you started. You never cease to amaze me.

You're a primary source for helping me realize my goal of being a web developer. Thank you, Brad.

Traversy; you're a BADASS in design and all things web development, but I just don't get it. Why would someone click on your link and dislike your post? It really doesn't make sense. BLOODY WITCHES!!! YOU'RE ALL THINGS WEB DEVELOPMENT WIZARD MAN. YOU'RE AWESOME.

This is just amazing! I am going through a Web Development bootcamp at the moment and just today I thought to myself: "video background for my future portfolio site would be so cool". It's like you read my mind! Thank you so much for sharing!

Your tutorials are amazing, they are really helping me! Thank You!

hey man i just want to give you a hug......you have helped me define my purpose ...i am student so maybe i am unable to support you on patreon but belive me i will when i get a job..... so tq

The best teacher... thanks Brad from Italy 🇮🇹

What a joy you are Brad. Thank you.

I just love to watch your videos. I must say, Your all videos are fantastic.

Really love your design content especially the ones without using css/js-Frameworks. Greetings from Germany.

Explained very well!! Thank you.

Thank you so much for this!

Fantastic content, this technique can really bring a landing page to life.

guys if you want to learn please dont just copy and paste code , trust me i did a lot , but there willl be times you will miss a lot of things , intead pase and write code side by side use some text editor like sulime or something .. youll be able to change a lot of things ,, ps: you might get a white space outside video if you dont use same sized video eg. 1280x720 , if you use another size video you might get a problem . but dont worry that background photo will get ou covered , if your professor dont tell you to remove the photo . and anyway thanks for explaining the process.

we can also use poster for video cover image instead of background image

Is there any chance you'll do another full django project like the one you did on udemy? It seems all guides I've found never go beyond beginner level projects and yours was the only one I could find that did. It was the best django guide I've found by a landslide.

You are an awesome and crystal clear explanation.

Wow this is cool :) nice one! Thanks Brad

Quick question mate. Currently doing your JavaScript course. I love it, thank you for that. I just want to know if is worth it to learn Jquery or not. Cheers

great!!!

Looks awesome! Thanks you!

Nice, can this support youtube videos?

Clutch. Thx!

Awesome video! One question: is there any way to get that same responsive effect using youtube embedded videos with the element?

I want to be a full stack development, where should I start?

Hi brad!! Great content thanks a lot🙏

Can this work with RU-vid embed

im trying to get a diferent vid as background but it display too zoom, transform; didnt help, any idea guys?

Please where can we get a video we can use

Hi Brad, For some reason my icons are not showing up, my code is the same as yours,

Yup Again a great content..! First Found this channel from udemy django course.I Have a little querry when you will upload series for real estate project bootstrap theme which you mentioned in udemy course

Where can I download social media icons?

What's the video resolution?

Where can we find some cool light mov's? Dear Brad, what about a film relating to coronavirus in terms of getting a job as front end developer? Is this kind of branch safe and developers don't have to worry about loosing their jobs in the future?

Do you have any ideas on what projects I should make I know React and Vue and typescript I want to make 4-6 projects that I could demonstrate to employers do you have any ideas on what to make

Hey all. My video clip is playing in a way that it seems zoomed it... the video dimensions are too large for the container? Does anyone know how to fix this?

Please do a crash course series on testing tools for JS.

Hi, Brad can we get a gatsby js refresh course the last one is 2 years old now.

link for this awesome background video pls?

make a video on front end interview questions

Video link please

Nice Brad :)

Do java tutorial please

hey man thank you for great concepts ive been following you for a while and i can easliy say 70% percent of what i know about coding is thx to you. if you consider to add a join button to your channel and make contents for people who support the channel with join button i think that would be very nice

2nd i guess, hell yeah

😍

First

This is very awesome I really love the moment when I see an a notification from this channal

Brad a react testing library crash course please

Can you make a video for beginners about the back-end web development Basics of database with node and express

Nice! I always wondered how this is done thanks Brad. And the best part is vanilla HTML5 no libraries my favorite

Couldn't have dropped this at a better time....need this for my capstone project!!

Perfect. I love small projects like this. Have a nice weekend everybody.

Brad, your lessons are amazing! This one was simply perfect. Thank you, again.

second bitches

Cool! :)

Can you create a react native expo crash course

Can you make a font awesome crash course

hello, when your vueJs course will be release ? and it's a complete course or project base course like nodeJs ?

definitely going to do this to recap and learn something new about HTML and CSS

why would you give dislike at this video ,i really don't understand

Can you do a RU-vid clone with react

what if i want to have the video on the first half of the screen? from top to bottom, like not full page

Make a GSAP video :)

Thank you!! Really needed it.

please create website with webpack bundler and costume element using API

Sir, i'm a junior developer. If i follow you i can success in this track. Thankyou.

Cool!

These are good for test projects I am really thankful to you sir!

Hello, is there a reason the video may not be working when I open the live server? I even copy and pasted the source url from your code, and turned off other extensions and adblockers on chrome and still the video won't show for me

12:10 you could also set top: 0; right: 0; bottom: 0; left: 0 It would keep it centered in absolute position.

Thanks a lot brother!!! You save my life 😁 Blessings from Venezuela

I was looking for something like this. Thank you so much.

dude this short video absolutely murders. short, sweet, and professional as hell. nice break from my usual hair-pulling react/router/redux projects. thanks for this my man!

Hey great Video! Can U Help me? How can i get the Sound from the Background Video in the Background?

11:30 for the video cover effect, just set the width:100vw and height:100vh with object-fit:cover, no need for all that positioning and translation crap

I have a question please: what is the difference between background-size: cover and width or height:100%

so.....I have a question, on my website I am running, the browsers do not allow full screen option. it greys out when it is running. however, when I am on my localhost the browsers locally will allow full screen. For the life of me I cannot figure out why the browsers won't allow it when its running on a different machine but will allow it when its running locally. You have any clue why its doing this? I could make a video showing what I mean if that is helpful. I believe the browsers should natively allow for a full screen option but none of them work when I try to go to my website outside local host.

Can someone explain to me why Brad first moved the video by 50% 50% and then translated it 50% 50%?

there's something that doesn't add up to me. If the .showcase has a height of 100vh and the .video-container height of 100%, then why does the video take up more height than the screen height? The video height drops to normal only if I also add overflow: hidden

guys, I need your help - how to put text wiz class "content" not in the middle, but in the bottom? tried some stuff, but couldn't change I mean changing its position

Great video. Does the fullscreen video background not work on an iPhone? I am unable to get it to work.

Sir, I am following your videos of Front End Development and learned so much, looking for a career in this field. Please help me how i should go further ?

hello.. need help to make the video run in the background when trying to view it in iphone , as it working fine in any laptop or Tablet devices without issues please help its need so that the project can be deployed and test for local use .. thanks in advance

Please make a video on GSAP 3.0...🥺🥺🥺

I watch alot of your videos on css and html, but everytime you start using flex in the css, nothing works, any suggestions?

Hi Brad, do you have a tutorial were you create that landing page that shows up every time you open a new tab in your browser?

Very clean and good looing. Just like pexel or unsplash, is there a website that offers videos to be used for free?

I like this can I steal it for my resume frontend

Thanks a lot for your extraordinary tutorials. if it does not matter for you, could you please let me know how old you are?

I copied the code exactly and added in my video and the site didn't work at all the text was still behind it

Thank you so much! This video is so clean and helpful!

Is the front end developer the one who uses javascript to build web applications or just websites? And thanks so Much for the VIDEO

Brad another ReactJS projects please🙏🙏

how do you find projects to work on if you're a beginner?anyone?

How to download the background image and video ?

This intro video is so soothing whenever I hear it.

what is showcase background for?

Bro you are a genious! thank you so much keep it up !