‫Hey, there.
‫Welcome back.
‫Now it's good time for us to start working with media, so there are four types of media that can be
‫used and upbeat.
‫The first one is favicon that we are going to utilize inside the.
‫So whenever we visit any type of page, we see this content, this fabric on any website, you see this
‫curvy gone by default, we have this web icon, but we can change this, so we need some icons to replace
‫that.
‫The next one is going to be about images.
‫Then we have videos and then we have audio.
‫These are some common ones.
‫So the first thing I'm going to do is add fabric on.
‫Basically, if everyone was the part of head section, it can also be utilized inside media different.
‫There's no rule I'm just discussing, and I'm just going to utilize it.
‫And we just need to use Link and then we can define this where we can set a basic shortcut on your score
‫and you get this complete option with all the information.
‫So this is our link dog and her we have relationship attribute that says shortcut icon.
‫Then we have to attribute to define which file or which link or the source where we need to connect
‫for this image.
‫And then we have time.
‫We just image Flash X icon.
‫So how do we need to provide our ISO file, which is on a fairly confined visit, any type of page?
‫You will get that.
‫So what I'm going to do is I'm going to drag my image in this same folder where my in next hour is.
‫So currently I have this image inside my next job.
‫Let me move this inside you and me.
‫Also, let me move my video inside this.
‫You and me on here, I got both of them, usually in our project we create.
‫So then their friends folder.
‫So for styling, we create a folder for images.
‫We created another folder for videos or any type of other media file.
‫Recreate folders.
‫But for now, let us understand this example.
‫Now we have this very cool under ISO.
‫So let me save this one and if I jump here.
‫She's not working, you lose control and then refresh.
‫Yep.
‫So it's a hard refresh control plus refresh.
‫Now you can see we got some fabric on.
‫So that's the first part at some behind the scene.
‫Along with that title we are using this fabric on.
‫I hope you got the idea.
‫Now the next one, we are going to discuss about items you talked with.
‫Just image Doug.
‫So all I have to do is use EMG and then just end.
‫So now they have to attribute, which is SAIC that has outsourced and indeed which is alternative fixed.
‫So whenever our image is not able to load this extra load now head, I just need to give source.
‫So our current sources are folding itself and here I need to download an image.
‫For images, you can either use unsplash.com or pexels.com.
‫And for Icon, you can use either Icon Monster or there will be icons eight dot com.
‫These are free website and you can use them.
‫So we are using something related to travel.
‫OK, it's trending topic one this week, and here you can get High-Definition images for free.
‫Let me try to use any one of them.
‫Let me try to see what you can do that it can be downloaded here.
‫It may try to directly download it here.
‫So had I downloaded my image, you can get back here and now I need to provide the source, which is
‫this for later?
‫So I just need to provide NYC, which is the image name bash the door typically.
‫And had I can give an alternative text, so it's just I'm just not lauding what I'm doing, please.
‫Maybe it's a New York image I'm going to call this neon.
‫If we save this one, get back to my page and here you can see we got the image, but it's too big.
‫And again, we are going to delay the discussion we had about attribute, so we earlier discussed about
‫it as well as height, so images appearing, that's working fine.
‫Let me try to give the wrong name and see what happens if I say this and why we jump here.
‫So now this image is not appearing, but this text, this alternative text is appearing.
‫And that's why it is pretty important.
‫Let me correct the image name.
‫And here let me provide it.
‫We do 600.
‫And hide.
‫Four hundred.
‫And then they are in the form of big survive on these values are in pixel.
‫Get back here to refresh.
‫OK, this is working fine and we try to use maybe 300 by 200.
‫Save this one.
‫Much better.
‫Now, all these images are high quality and that pretty big in size, so make sure you realize and grab
‫them or just resize them.
‫So I hope you got the idea about images.
‫These are attributes.
‫These are values altered grid height, not hair.
‫The important thing is about naming Make sure to utilize correct name of your image.
‫Also, make sure you don't use space with their image name.
‫If you have any type of space, use dash or not, including name where I miss something like this NYC,
‫NYCHA or jpg.
‫Here I use NYC as New York City theme as travel may not do if you have anything else.
‫If you want to add a space between the words instead of using space use dash and this way you are not
‫going to travel your program.
‫So that's it.
‫That's the image part.
‫Now, I had one other important thing while using any type of content that is inside your folder in
‫the same folder, you can also use Dash Slash.
‫So this is referred to as your root folder, where your next stimulus that has this folder itself slash.
‫Now inside this folder, we have and might see the end or jpg.
‫So that means for us, we have selected our own folder where in next our families, that is this you
‫will meet and then you have selected this image.
‫Similarly, I strongly recommend you do this.
‫You will understand why.
‫The first thing is you get all this addition.
‫So you now define this folder that means you are in this folder, you will get all available addition.
‫The second thing is when we divide this content into different folder, it is much easier to utilize
‫and understand about this rule.
‫So here this is done.
‫This is about image.
‫Now let's talk about video.
‫So if I use this video tag, enter, hey, you can see I got options about S.A.C., which is source
‫now.
‫Instead of directly adding this here, let me divide things into multiple folder.
‫So let me call this polarized media and move my this video inside this media.
‫And let me also move my images inside this media.
‫So the current structure is I have a media folder inside, I'm going to have all the content regarding
‫images as well as video, then I have our next folder and then I have a gone in for like, look, something
‫like this and next may be gone and media.
‫Now, if I need to define favicon, this is going to remain same.
‫It is.
‫I wrote that on a Nix's and then our for one.
‫Great.
‫But now if I need you to find this group and then inside my media, actually, I'm going to select my
‫media.
‫And then had I have no option, which is NYC.
‫What I'm going to do is here, I'm going to find media, and then I have this random thought before.
‫Let me save this one.
‫Jump back here.
‫OK, this video is too big, and if I try to decrease the size, OK, I'm at 50 percent now, but I'm
‫still not able to play this.
‫Why?
‫Because we have sodium restriction and we need to utilize our inactive you.
‫The first attribute here we need to use is control.
‫So once we passed this controls, that means now we have option to play and pause if I jump here.
‫You can see now we got an option to play and pause.
‫But before that, I need to use some weight as well as height.
‫So I'm going to use weight and I'm going to pass with as quality and haidar's 720.
‫Let me save this one now, control, give us play and pause, and all the other volume settings we can
‫hide is going to decrease the size.
‫Let me get back here.
‫This is working fine, but I still need to decrease the size.
‫Maybe I should utilize the 640 and 40.
‫Make sure you save everything, okay, this is better.
‫Here I am at 150 percent, so you can read things easily on your screen.
‫OK, now this is walking fine.
‫We have play pause for the screen escape and then we have this volume.
‫And we also have downloaded that option.
‫So these are the control with the help of our control attitude.
‫Now there are a lot of other things that you can do instead of adding thoughts here.
‫Maybe we need to add multiple other options.
‫What if this MP for Washington is not supported on the browser?
‫What we can do is we can add multiple videos for the same this video tag.
‫So instead of using this source here, what I can do is I can remove the source now.
‫Here I can are multiple sources.
‫So one will be the main one and the other ones will walk as backup.
‫And I can use saws.
‫And then all I need to define is the same as I see and then type.
‫All I have to do is use saws and inside that I'm going to pass as RC, which is the same thing that
‫we define.
‫And this is going to use media and then random and before.
‫And then here we need to find new type, which is and this is a video.
‫Slash and p three and P4, whatever that might.
‫If this is true before.
‫Now, maybe I have another radio just follow back up if this is not supported, if this MP vote is not
‫supported.
‫What I would do is I'm going to release the backup, so I need to find the source again had I don't
‫have any other MP.
‫So what I'm going to do is I'm going to find this absolute.
‫I should use hair.
‫Maybe I'm using WMT, Walmart or maybe I have.
‫Or give Walmart or any other Walmart that this order, if this doesn't work.
‫So maybe I have another file called W a re this extension.
‫So this work as a backup, if the first one doesn't work.
‫Let me save this one.
‫Get back here and refresh this one.
‫OK, this is fine.
‫Now, this video has so, Dana, that attribute you can use autoplay, you can use muted and few other
‫attributes by default for your video.
‫Maybe if I use this muted before dark.
‫Let me show you that by default, it's at full volume.
‫But if I jump here and use you there and say, Get back here now and you want to open this page by default,
‫this video will be muted.
‫These are a few common settings that you can utilize.
‫And this hope so and you are working with.
‫VIDEO So I hope you got the idea.
‫Something similar will be with audio.
‫I strongly recommend you to visit W3 School to understand more about this topic.
‫You are not going to utilize everything in.
‫And let me tell you, there will be certain things that you will learn as you move forward with the
‫whole journey on your own projects, on some projects that we are going to do.
‫If you click on audio now, you need to use something similar audio.
‫Then we need to provide control source exactly the same thing that we used with video.
‫You need to provide some backup and we need to provide this.
‫So I hope you got the idea.
‫And here you can also write message if both of them doesn't work so your browser does not support the
‫audio element.
‫Similarly, we can do one.
‫VIDEO I hope you got the idea about this media, which just about have you gone?
‫I don't know if everyone is fed media or not, but I hope you got the idea for.
‫Image video as well as audio.
‫Thank you for calling.
‫Make sure to test this out, make sure there are delays in Iran, no, you know that you have while
‫you can download it from resource.
‫Make sure to check out all the resources like Unsplash fixes and absolutely school, and I see ways
‫in the next one.