Adding a video background to a Web page in Adobe Dreamweaver.

hello everyone today a short tutorial on how to create a video background using Dreamweaver I've already set up the local root folder it has two files in it a board came up before board Kim with them they're the same just different formats with the same content they were both created using Adobe Media encoder from a quicktime movie and there is another tutorial on that on canvas to show you how to compress your file correctly and and have it prepped and then obviously it's in the local root folder that is all we have you see the first thing we need is an index file because this will be my new my home page so let's start there okay as with every initial website web page I'm gonna go ahead and create a style sheet you will need this there is a selector for you to use that is on canvas will cut and paste that in a moment but first we'll call this video Viji dot CSS say okay alright and of course with every new thing we should have first set up a body tag and actually let's do this let's do HTML HTML body so we're setting two separate rules that's not a descendant selector there's a comment in there so what we just want to say is we want my height and width to be a hundred percent so one percent and 100 percent remember basically we're establishing the parent and a grandparent of any children we make that sounds weird when I say it like that but y'all know what I mean okay and zero out the margins okay now we're set we can go ahead and insert an HTML element we have our you know basic styles already were ready for another selector but we first we need to actually have the element the HTML element so under our insert menu you will notice that under HTML one of the options we've been in here a lot is html5 video so we can just click on that alright now we don't see anything we just see a space for a video so what you want to do is just go to properties so window properties and as long as you have this video thing selected you'll see all the properties that you can set including where we'll put the ID we're gonna want this muted we're gonna want it to autoplay we're gonna want it to loop I'm gonna want to turn off the controls if it's background video don't give them controls and most important that we need to set the source we can use this point to file or I can just type the name of the file in there it's on the top level but you support to file it's a little weird on my machine right here who does it go to it so watch the cursor not the arrow and if it doesn't follow along I would have put board can't wait before so as long as it says board came in and before and I'm given an alt source which is why I have the second video so if for some reason the browser doesn't play that when it'll play this other one all right that one didn't show up so I can just go ahead and type that in if I want keep me from having so either way and this is my web M file okay cool all right so yeah no sound everything seems to be rolling don't you don't want sound on a background video please except for you know there's always an exception but for the most part now all right I'm gonna keep this open because I'm gonna have I'm going to add an ID so we'll just move this off to the side so on canvas I already made a selector for y'all called it background video Muji video alright I'm gonna copy that and I'm copying it to my clipboard right now and I'll come back over here and of course it has to go on my external style sheet it's a selector so I just need my next available space I'll popped it in there alright so I have my selector it says look at these important qualities it's a fixed position it's set zero pixels off the right and zero pixels off the bottom remember if you said some defects you always need to set a left or right the top or bottom and I'm going with a minimum height of a hundred percent so it fills the screen okay now it does not not filling the screen yet because I actually haven't hook the two up right I have the selector I have the element I need to make sure that my element my video is I has the proper ID selected with it so I can actually do that right here now that I have it on my style sheet it lets me pick it my property's value or I could have just typed in id equals background video just like this that's all about it was that little thing but notice now it's a hundred percent I to go ahead and preview this on device which is probably perfect now so I can save my files and jump over to there we go that's one background video look like it's gonna do this at home yourself cool alright a pretty nice skate ramp I'd built every piece of that best thing I ever made accordingly Queen all right let's see where was I hiked above escape oh this so we're done basically we have our background but I want to show you some important things about actually adding in the closest actually adding the content at this point right now we have one thing on a page is this background video and it's not a true like you know every time I've said back on image and then adding it background image via CSS this is different you did have to use CSS of course but it's not place that images in place yeah via CSS it's an HTML element so what does that mean a practice well it just means there's some few properties that you're gonna want to note this video is fixed so we don't need to worry about the UM the UM the page order it's taken out at the normal stacking order because it's fixed so if we need to add something I'm gonna put a logo right here in the center of the screen we can add it up here we can put it down here it's not gonna be a big deal and we'll just go ahead and do that you're gonna add a section section there we go took a second I'm gonna ID this as board logo new CSS rule but on my stylesheet external stylesheet say okay make this block box we're gonna give it a width of 30% then make this eventually I'm gonna put a responsive image inside of it that will be set to 100% so it automatically you know fill the screen as I want it to but I'll be responsive and for the margin I'm gonna uncheck this thing for all and I want a left margin of 35% because that will put my box in the center so I'm 30 I'm gonna laughs 30% in the middle which is my logo and then that would mean 35% on the right that adds up to 100% so we're good we need to give a background color to this thing I'm gonna do black but I'm gonna make it transparent so it'll really show if it's a gray if I lower it let's and I'm gonna give it a temporary height in pixels but we're gonna take that off ultimately because we're just gonna let the height to put whatever content we have define it okay and also and this is super important we want our set a position to relative and we're also if you know I'm gonna go ahead and mention this now the z-index is going to be important too because his background helmet fills up the whole screen and so for our browser to understand where things exist in space we're gonna want to give this as the index of like 50 and this is just a number is relative the lower the number the more in the background it gives so by giving this a high number like 50 this box should show up in front of our video we could also if this doesn't work you should go to our video and set the Z&X to another lower number but by default it should be zero okay so everything should be golden I will show you where to check this if you could get to set yours the end X but I think we're good right now I'm gonna say okay okay okay I clearly forgot to give that a top margin if there's our box I'm glad because I wanted to remind myself to show you what we've got here so there's our board logo I'm gonna give it a top margin it said of 20% do you wanna pixels I wanted percent so oh my gosh quick once Jeff there you go whoo 200% not good 20% better okay there we go okay we'll probably turn that up a little bit after we have to hide it and like I don't wanna mess with the too much right now it's just gonna depend on the height we also want to put our I'm just gonna put the word logo in there for now and we're gonna scale that up bigger and make it white because it looks pretty hideous Oh Lord computer just deciding to go really slow because I'm recording video at the same time okay logo just the word logo I want to make sure I do not get all the Lord so slow there we go there's the word logo let me go to my board logo put the type thing oh please don't stop please don't stop working uncheck show set go to type and pick a color that's white and a size and the ends be there for now but first I'm going to pick out font family and go with them you see gone okay and I mean that's fine for now I can Boulder or whatever I'm not actually gonna use typos many places for the actual logo I just wanted something in different outs when we swapped I actually have the logo done and we can go ahead and set that the center and now you can actually take off the width and height or the height not the width that way the box will just be whatever size one okay just to refresh the important properties I set for this section right here I added a z-index if you don't have it added yet or forgot to add it it's down here with your properties like float and clear we didn't set any of those but we did set the Z and X value the fifty again it just needs to be a higher number than our background which is zero video back on the Z zero and we set position to relative all right that might be important let's do one last preview see how this looks call it a wrap before my computer clunks out my hard drive fills up okay let me know if you have any questions just email me that is video backgrounds I think we covered it all

Channel: Jeff Murphy

Views: 1,186

Keywords: Dreamweaver, tutorial, jeff, murphy, interactive, art, design, web, webpage, help

Id: V1d33Uzu6b4

Length: 13min 31sec (811 seconds)

Published: Wed Mar 25 2020