Website with Background Video in HTML & CSS3 | Krishnaa Kumar | Skillshare

Website with Background Video in HTML & CSS3

Krishnaa Kumar, Your Best Mentor :-)

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (12m)
    • 1. Introduction

      0:17
    • 2. HTML Code

      2:30
    • 3. Video Adjustment

      2:24
    • 4. Text Background

      2:44
    • 5. Final Touch Up

      3:57

About This Class

Hi Everyone,

In this class, we will create a website with video in background.  Make sure, you have some basic knowledge of HTML and CSS3.  If you don't have, you can simply follow along because creating such website is super easy.

After finishing the class, you can download the project and modify it as per your need.

Transcripts

1. Introduction: Hi, everyone In this class you learn how you concert a video as a background. If you have a page this will bear for a lot would make sure you have some basic knowledge. Off Estimate ES is if you don't have, you can simply for a long, because skating's air to abilities. Very easy seeing the class. Have a nice day. 2. HTML Code: Hi guys. Really learned how you consider you lose a background for your webpage are making use office of limb text and this simple estimate structure. Let's go to development to help the verdict. Last name off. Really a container. Make use off Redo element. We ridiculous name off. Bt video. The Lord will be Otto Photoplay will be true. It will be muted. We want the loop. No, you know, to supply the source. I already got a video file here in the videos fold up and they're still file. So it will be radios go dark and before I will be video slash and before in case the file format is not supported by the browser. You want to display the message so it will be really a file format. It is not supported? No. We need some content over the video. So it will be Do you class will be content Make is off at one tag on next will be welcome video Make use off you tag. Next will be. This is a three D o background tutorial for bigness. Make it absolute weakness. Save it. Go to browse, uh, profession and is out. What you can see This is our text. And he's a video. So we're done with the estimate file. Next, we will start with the CSS selects radio. How will I stood? 3. Video Adjustment: Hi, guys. I'm miserable. Start working with the CSS file photo file. New foil and see if it has my style dot She uses. Save it. No. So, like the will you contain a class? Do the height off 100%. We're tough. 100% Save it. Go to index file and we need to another Francia for the CSS file. Let's make use off link element. And that will be my star. Lord ceases. Save it. Go to browse the fresh it Okay, made position fixed on their index will be 1000. Save it. We're getting some space on the top and the left. We have more this Don't worry about this one. We'll fix it later. So make it stop. Sito left Zito both here. So we have fixed the space on the top and the space only left. No, it's timeto fix the space on the right hand side. Looks like the BDO class many might be 100% and many hundreds with the 100% position will be absolute. You say this. What about, uh, profession? You can see we got our text. We got a video and there no spaces or neither side. So we're done with this part? The next video. Well, what could the content? Civil X radio. How will I stay 4. Text Background: Hi guys. So far, we're done with the realignment Park your D video. We're going to text over the video nor extent mortified the text a bit. Let's go to court file. And the class name is content. Make height. 100%. 100% save it. Got about, uh, refresher. Okay, noting these are there makers off background color property on it will be rgb make a 300 Xeno Zito. Transparency will be 0.5. Save it. Make it treat perfect. No, we're having some space on the top and some space on the left. Remove this. Make the position. Absolute stop will be Zito. Andi left will be serious. Save it. Go to Rosa Refresher. So we got a background, which is this one. And now there no spaces on the top and on the left Try to make it five. It's too much medical. Oh, 2 55 on making 0.1. I think this will be good. So we're done with this part? The next video we'll try toe mortified this text of it just to make it more attractive. See the next video? How will I still 5. Final Touch Up: Hi guys in the previous really work with the background for text in the studio will start trying toe modify it extra bit to make it look more attractive. What? A court file. Select D at one element. Make extra line center. I see it. So we got the next in this end up maker Din a focus. Save it. Nice foreign size will be be pixels. Make it 1 50 Well, that's too big. Make it 100 pixels. Nice. Make yourself margin property and make it 5%. Make it 25 being to Perfect, I think. Nice. No, we want to go call this next slip. The key element explain will be Santo. Foreign size will be 30 pixels. Try to make it in uppercase. Make it 20. Margin Stop for the B 5%. Make it minus 5%. Nice part Omitted a little down, so make it 3%. I think I wasn't actually perfect. They're stealing the next colored white. Nice. Just copy this team on Mr To. Great. So this stuff I love put you can modify dis text as by your need, but we gotta be back on video. We got the overly text and this is no five lots put. See the next video. How would I stay