How To Make A Video Background In Adobe Muse (No Widgets Needed)

hey everybody and welcome Ben here with pier presents creative and today I'm going to show you guys how to create a full-page video background for your website and we're we're going to do it without the use of widgets again we're actually going to do this from scratch and I'm going to show you how easy it is to code this and add it to your Adobe muse website so as you can see right in front of us we have a demo if you will and I just kind of made a quick Apple mock-up for the Apple pencil and yeah it's a fixed background it's a fixed video background and it's really easy to do so let's go ahead and jump straight into muse and I'll show you guys how we can do this okay so this is the project I already created but we're going to start from scratch so you guys can actually see what I did so I'm going to go to file a new site and I'll just use the standard 960 pixels well we'll keep it as is hit OK we're just going to go to the home page now one of the biggest things you're going to need to do is make sure you dedicate a particular layer to being your video background so layer 1 is actually going to be my video content so I'm going to rename it by double clicking on it just call it video background okay so we got video background all right so we have our video background next thing we need to do is we need to select our video that we're actually going to use for our video background now most browsers support mp4 video file types so I'm actually just going to use that some browsers support others such as OGG I believe it's called but we're going to just use mp4 for our video so to do this what we need to do is first just go have it ready in your computer just have it edited ready to go and just compress it in any way possible but we need to make sure and add it to our projects assets so to do that we need to go to file go to add for upload and mine's just called what shoot what did I call it women drawing on an iPad perfect there it is so it's added to my assets and if I were to go to my assets panel you see it right there it says women drawing on on iPad mp4 then I'll go back to my layers so we have it loaded we have it ready to go all we need to do is go to page actually excuse me go to object and we're going to insert HTML now what we need to do is we need to insert what's called a video tag here so before we even insert the video tag we're going to open up a div and we're going to close that div and again HTML you have opening and closing tags and then inside we're going to do video and we're going to close the video tag as well and inside the video tag we're going to give it a tag called source okay so we have our source tag and we're going to actually add a source attribute and what this attribute is going to do is basically we're going to get to link to our video that we just uploaded to the assets folder so obviously it's an asset so we're going to hit a SS ETS for assets I don't know why I spelled that for you guys it's pretty easy so you're going to hit assets forward slash and then your video type so mine is called woman drawing on iPad so and it's dot mp4 so we have the source of the video is from the assets folder and it is a woman drawing on an iPad mp4 and then we need to tell the file type so we're going to go to type equals video slash mp4 and that's it you can do a fallback tag which the video will display just in case it's an older browser so if you want to have a fallback you can put sorry your browser doesn't support video there we go so what this is doing is we have a video tag and this is used in html5 in the video tag it's asking for the file of in your assets folder of the woman drawing on an iPad and it's just saying that it's a mp4 video and if the browser is older it will just completely ignore this tag and it will say sorry your browser does not support video so right off the bat we already have our video set all we need to do is make sure that this video is looping and make sure it's muted because obviously sound in a website I mean if you were to visit a website that just has sound blaring I know it can get annoying so just for a good user experience we're going to mute the video so you just put muted and we're putting this inside the video tag and then we'll put loop and then we'll put autoplay and these are all attributes and I know normally you're used to seeing attributes require values where it has this equals and then quotations here but for the video tag it actually doesn't require that so that's pretty good pretty easy you just got to remember video and if you want it muted you just type muted if you want it to loop you just type loop and autoplay pretty self-explanatory so moving on from there the last thing we need to do is give our div this is our container div we need to give it a class so I'm going to give it a class name and my class name will just be called vid V ID and what a class name is is it's actually the exact same as a graphic style so this is just an identifier that we can eventually use in our CSS like we did in some other previous tutorials the class name we're going to be able to use this class name to identify this particular video and the video box there a container and our CSS so we have this all set up we're all ready to go and we just hit okay so we already have our embedded HTML and you'll see it just opens up a box like this but I'm going to go ahead and I'm going to bring it to the top left corner and I'm going to drag it all the way over to the far left and I'm going to pin it to the center and we can actually leave it just this height because the code we're going to add to our video is it's it's going to expand it to fit the full height of the browser so now that we have our video set up we actually have the video tag in place with a div surrounding the video to hold it in place we just need to style it with some CSS so to do that we need to go to page and we need to go to page properties and we're going to go to the metadata tab you guys are probably getting used to this now because of all my tutorials but we're going to look for the HTML for head and again the head part of the HTML document lets you put in code that's pretty much invisible to the user so CSS JavaScript page descriptions meta description so on so forth so we're going to go ahead in here we're going to open up a style tag and we're going to close that style tag and then we're going to go ahead and select our vid container so we're going to hit period which is a class selector and then we're going to target the class name which is vid we're going to open and close the curly bracket and then side here we're going to do we're going to give it some style we're going to actually give it a position attribute which is going to be position relative then we're going to go ahead and give this guy a full width so we'll do with 100% we'll do height 100 VH and I use VH for viewport height instead of percentage because if you have a very long web page let's say you have a one-page website and you're just using the video background as kind of an accent then the video would stretch not just the viewport height which is from this top to the bottom here it would stretch way beyond that so your video would look blurry it would look pixely it just wouldn't look that good so I recommend doing 100 viewport height which is the 100 VH and it'll look a lot better it'll look a lot cleaner so we'll go ahead our vid container which it remember this is the div this is the outside div it has a position of relative a width of 100% a height of 100 viewport height and that's all we need so next we need to target the vid and it's child the video tag so we'll do period vid and to access an element that's inside of this vid tag we just type out video this is the element tag this is what we did and I can explain that later so basically you have a hierarchy where it's cascading stylesheets and with HTML you have an element and then you have child elements the video right here is a child element of the vid element above it so to target the video child element you just do vid and then video and then you can open up your curly brackets as we did before and with this guy also really easy all we have to do is go to position oops absolute and it's a different position than the vid but the relative is insuring that this absolute position stays inside we can get into further that we can go dig further into some CSS and why these things work later but we're just going to keep moving on with the tutorial so position:absolute we're going to do left 50% we want this to be 50% from the left and we want it to be 50% from the top which is why we do top 50% and since our transform origin is actually in the top left whenever you move from thing something from the left or anywhere the move origin is actually the top left corner so we actually need to fix that and it's called the transform thing so we'll be transform translate and then inside you'll do negative 50% comma negative 50 percent and since transform is still relatively new I mean it's it's been around quite a while but I will go ahead and use some vendor prefixes to make sure it works on all browsers so we'll be WebKit and we'll copy and paste the transform translate and then we'll also do a - MS for Microsoft Internet Explorer and then we'll paste it there as well and then all we need to do is ensure that it stretches a 100% of the height and 100% of the width of the vid container so we'll do min height do 100% oops I forgot my percent and then we'll do me men with 100% and then you just go ahead and hit okay and you'll see it probably oh wow normally it'd get a spiral here but looks like it I already knew what to do so we'll go and continue it we'll go ahead and check this out so go to preview page and browser it's loading there we are we have our full page video background and we could actually go back in and we can start placing stuff on top of it we can create a layer and go ahead and just draw out some divs along the top we can make this obnoxious cyan color and we'll just go to file preview page and there you go you see the cyan box on top of your video background and since we pinned it we actually took the container that we added the HTML to and pinned it the video background will stay in place as you scroll up and down on your website page so hopefully that was pretty easy for you guys it was pretty straightforward and if you have any questions feel free to ask and you can go to pure presence creative comm if you have any ideas for stuff you'd like to learn and if you're interested in learning more code more HTML CSS JavaScript just let me know and until next time you guys be sure and have a good one

Channel: Paper Krane

Views: 49,871

Keywords: Tutorial, Adobe Muse, Adobe, Design, Video, Video Background, Website Video, Website Video Background, HTML, CSS, Pure Presence Creative, Web Design

Id: s5laJaqwunI

Length: 13min 54sec (834 seconds)

Published: Sat Oct 01 2016