1 00:00:00,560 --> 00:00:01,190 ‫Hey, there. 2 00:00:01,340 --> 00:00:02,030 ‫Welcome back. 3 00:00:02,480 --> 00:00:07,520 ‫Now it's good time for us to start working with media, so there are four types of media that can be 4 00:00:07,520 --> 00:00:08,840 ‫used and upbeat. 5 00:00:09,350 --> 00:00:13,430 ‫The first one is favicon that we are going to utilize inside the. 6 00:00:14,870 --> 00:00:21,820 ‫So whenever we visit any type of page, we see this content, this fabric on any website, you see this 7 00:00:21,840 --> 00:00:29,720 ‫curvy gone by default, we have this web icon, but we can change this, so we need some icons to replace 8 00:00:29,720 --> 00:00:30,050 ‫that. 9 00:00:31,080 --> 00:00:33,690 ‫The next one is going to be about images. 10 00:00:33,930 --> 00:00:37,080 ‫Then we have videos and then we have audio. 11 00:00:37,680 --> 00:00:39,090 ‫These are some common ones. 12 00:00:39,600 --> 00:00:42,660 ‫So the first thing I'm going to do is add fabric on. 13 00:00:42,930 --> 00:00:49,300 ‫Basically, if everyone was the part of head section, it can also be utilized inside media different. 14 00:00:49,660 --> 00:00:53,460 ‫There's no rule I'm just discussing, and I'm just going to utilize it. 15 00:00:54,600 --> 00:01:01,530 ‫And we just need to use Link and then we can define this where we can set a basic shortcut on your score 16 00:01:01,920 --> 00:01:05,230 ‫and you get this complete option with all the information. 17 00:01:05,250 --> 00:01:10,800 ‫So this is our link dog and her we have relationship attribute that says shortcut icon. 18 00:01:11,190 --> 00:01:17,730 ‫Then we have to attribute to define which file or which link or the source where we need to connect 19 00:01:17,730 --> 00:01:18,720 ‫for this image. 20 00:01:19,200 --> 00:01:20,270 ‫And then we have time. 21 00:01:20,280 --> 00:01:22,950 ‫We just image Flash X icon. 22 00:01:23,640 --> 00:01:30,000 ‫So how do we need to provide our ISO file, which is on a fairly confined visit, any type of page? 23 00:01:30,000 --> 00:01:30,840 ‫You will get that. 24 00:01:31,650 --> 00:01:37,080 ‫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. 25 00:01:37,530 --> 00:01:40,710 ‫So currently I have this image inside my next job. 26 00:01:40,740 --> 00:01:43,070 ‫Let me move this inside you and me. 27 00:01:43,440 --> 00:01:45,600 ‫Also, let me move my video inside this. 28 00:01:45,600 --> 00:01:51,780 ‫You and me on here, I got both of them, usually in our project we create. 29 00:01:51,930 --> 00:01:53,490 ‫So then their friends folder. 30 00:01:53,730 --> 00:01:56,810 ‫So for styling, we create a folder for images. 31 00:01:56,820 --> 00:02:00,570 ‫We created another folder for videos or any type of other media file. 32 00:02:00,720 --> 00:02:02,040 ‫Recreate folders. 33 00:02:02,460 --> 00:02:04,680 ‫But for now, let us understand this example. 34 00:02:04,680 --> 00:02:07,770 ‫Now we have this very cool under ISO. 35 00:02:08,250 --> 00:02:11,580 ‫So let me save this one and if I jump here. 36 00:02:13,710 --> 00:02:16,370 ‫She's not working, you lose control and then refresh. 37 00:02:16,560 --> 00:02:16,900 ‫Yep. 38 00:02:16,980 --> 00:02:19,570 ‫So it's a hard refresh control plus refresh. 39 00:02:20,010 --> 00:02:22,470 ‫Now you can see we got some fabric on. 40 00:02:22,950 --> 00:02:25,500 ‫So that's the first part at some behind the scene. 41 00:02:26,220 --> 00:02:28,700 ‫Along with that title we are using this fabric on. 42 00:02:28,830 --> 00:02:30,180 ‫I hope you got the idea. 43 00:02:31,170 --> 00:02:34,260 ‫Now the next one, we are going to discuss about items you talked with. 44 00:02:34,260 --> 00:02:35,250 ‫Just image Doug. 45 00:02:35,670 --> 00:02:39,720 ‫So all I have to do is use EMG and then just end. 46 00:02:40,530 --> 00:02:47,160 ‫So now they have to attribute, which is SAIC that has outsourced and indeed which is alternative fixed. 47 00:02:47,670 --> 00:02:54,300 ‫So whenever our image is not able to load this extra load now head, I just need to give source. 48 00:02:54,630 --> 00:02:59,130 ‫So our current sources are folding itself and here I need to download an image. 49 00:03:01,150 --> 00:03:05,820 ‫For images, you can either use unsplash.com or pexels.com. 50 00:03:06,190 --> 00:03:12,730 ‫And for Icon, you can use either Icon Monster or there will be icons eight dot com. 51 00:03:12,760 --> 00:03:14,830 ‫These are free website and you can use them. 52 00:03:15,250 --> 00:03:17,620 ‫So we are using something related to travel. 53 00:03:17,890 --> 00:03:24,220 ‫OK, it's trending topic one this week, and here you can get High-Definition images for free. 54 00:03:25,090 --> 00:03:26,830 ‫Let me try to use any one of them. 55 00:03:28,030 --> 00:03:31,060 ‫Let me try to see what you can do that it can be downloaded here. 56 00:03:31,930 --> 00:03:33,940 ‫It may try to directly download it here. 57 00:03:44,420 --> 00:03:50,390 ‫So had I downloaded my image, you can get back here and now I need to provide the source, which is 58 00:03:50,660 --> 00:03:51,800 ‫this for later? 59 00:03:52,340 --> 00:03:59,980 ‫So I just need to provide NYC, which is the image name bash the door typically. 60 00:04:01,110 --> 00:04:06,300 ‫And had I can give an alternative text, so it's just I'm just not lauding what I'm doing, please. 61 00:04:06,600 --> 00:04:09,360 ‫Maybe it's a New York image I'm going to call this neon. 62 00:04:13,590 --> 00:04:20,520 ‫If we save this one, get back to my page and here you can see we got the image, but it's too big. 63 00:04:21,790 --> 00:04:29,230 ‫And again, we are going to delay the discussion we had about attribute, so we earlier discussed about 64 00:04:29,620 --> 00:04:33,400 ‫it as well as height, so images appearing, that's working fine. 65 00:04:33,700 --> 00:04:40,150 ‫Let me try to give the wrong name and see what happens if I say this and why we jump here. 66 00:04:40,510 --> 00:04:44,920 ‫So now this image is not appearing, but this text, this alternative text is appearing. 67 00:04:45,160 --> 00:04:46,930 ‫And that's why it is pretty important. 68 00:04:47,710 --> 00:04:49,240 ‫Let me correct the image name. 69 00:04:49,420 --> 00:04:51,120 ‫And here let me provide it. 70 00:04:52,090 --> 00:04:53,560 ‫We do 600. 71 00:04:54,760 --> 00:04:55,780 ‫And hide. 72 00:04:57,110 --> 00:04:57,790 ‫Four hundred. 73 00:04:59,160 --> 00:05:03,820 ‫And then they are in the form of big survive on these values are in pixel. 74 00:05:04,290 --> 00:05:06,330 ‫Get back here to refresh. 75 00:05:06,660 --> 00:05:11,910 ‫OK, this is working fine and we try to use maybe 300 by 200. 76 00:05:13,410 --> 00:05:14,340 ‫Save this one. 77 00:05:16,110 --> 00:05:17,010 ‫Much better. 78 00:05:18,560 --> 00:05:23,870 ‫Now, all these images are high quality and that pretty big in size, so make sure you realize and grab 79 00:05:23,870 --> 00:05:25,640 ‫them or just resize them. 80 00:05:26,150 --> 00:05:28,190 ‫So I hope you got the idea about images. 81 00:05:28,610 --> 00:05:29,810 ‫These are attributes. 82 00:05:29,810 --> 00:05:33,500 ‫These are values altered grid height, not hair. 83 00:05:33,500 --> 00:05:39,200 ‫The important thing is about naming Make sure to utilize correct name of your image. 84 00:05:39,410 --> 00:05:43,340 ‫Also, make sure you don't use space with their image name. 85 00:05:43,760 --> 00:05:49,850 ‫If you have any type of space, use dash or not, including name where I miss something like this NYC, 86 00:05:49,850 --> 00:05:51,420 ‫NYCHA or jpg. 87 00:05:51,440 --> 00:05:58,220 ‫Here I use NYC as New York City theme as travel may not do if you have anything else. 88 00:05:58,250 --> 00:06:05,270 ‫If you want to add a space between the words instead of using space use dash and this way you are not 89 00:06:05,270 --> 00:06:06,950 ‫going to travel your program. 90 00:06:07,550 --> 00:06:08,170 ‫So that's it. 91 00:06:08,180 --> 00:06:09,470 ‫That's the image part. 92 00:06:09,800 --> 00:06:16,130 ‫Now, I had one other important thing while using any type of content that is inside your folder in 93 00:06:16,130 --> 00:06:19,900 ‫the same folder, you can also use Dash Slash. 94 00:06:20,420 --> 00:06:27,620 ‫So this is referred to as your root folder, where your next stimulus that has this folder itself slash. 95 00:06:27,680 --> 00:06:31,970 ‫Now inside this folder, we have and might see the end or jpg. 96 00:06:32,390 --> 00:06:37,940 ‫So that means for us, we have selected our own folder where in next our families, that is this you 97 00:06:37,940 --> 00:06:41,090 ‫will meet and then you have selected this image. 98 00:06:41,720 --> 00:06:43,910 ‫Similarly, I strongly recommend you do this. 99 00:06:44,450 --> 00:06:45,590 ‫You will understand why. 100 00:06:45,710 --> 00:06:47,660 ‫The first thing is you get all this addition. 101 00:06:47,990 --> 00:06:54,140 ‫So you now define this folder that means you are in this folder, you will get all available addition. 102 00:06:54,800 --> 00:07:00,380 ‫The second thing is when we divide this content into different folder, it is much easier to utilize 103 00:07:00,380 --> 00:07:01,850 ‫and understand about this rule. 104 00:07:02,870 --> 00:07:04,450 ‫So here this is done. 105 00:07:04,460 --> 00:07:05,720 ‫This is about image. 106 00:07:06,110 --> 00:07:07,780 ‫Now let's talk about video. 107 00:07:07,910 --> 00:07:14,720 ‫So if I use this video tag, enter, hey, you can see I got options about S.A.C., which is source 108 00:07:15,350 --> 00:07:15,530 ‫now. 109 00:07:15,530 --> 00:07:21,080 ‫Instead of directly adding this here, let me divide things into multiple folder. 110 00:07:21,410 --> 00:07:28,040 ‫So let me call this polarized media and move my this video inside this media. 111 00:07:29,990 --> 00:07:33,710 ‫And let me also move my images inside this media. 112 00:07:35,570 --> 00:07:40,850 ‫So the current structure is I have a media folder inside, I'm going to have all the content regarding 113 00:07:40,850 --> 00:07:46,910 ‫images as well as video, then I have our next folder and then I have a gone in for like, look, something 114 00:07:46,910 --> 00:07:49,100 ‫like this and next may be gone and media. 115 00:07:50,250 --> 00:07:54,200 ‫Now, if I need to define favicon, this is going to remain same. 116 00:07:54,560 --> 00:07:55,010 ‫It is. 117 00:07:55,220 --> 00:07:57,890 ‫I wrote that on a Nix's and then our for one. 118 00:07:58,070 --> 00:07:58,490 ‫Great. 119 00:07:59,180 --> 00:08:05,930 ‫But now if I need you to find this group and then inside my media, actually, I'm going to select my 120 00:08:05,930 --> 00:08:06,580 ‫media. 121 00:08:06,590 --> 00:08:09,350 ‫And then had I have no option, which is NYC. 122 00:08:10,760 --> 00:08:18,320 ‫What I'm going to do is here, I'm going to find media, and then I have this random thought before. 123 00:08:18,560 --> 00:08:19,760 ‫Let me save this one. 124 00:08:20,450 --> 00:08:21,320 ‫Jump back here. 125 00:08:21,960 --> 00:08:30,710 ‫OK, this video is too big, and if I try to decrease the size, OK, I'm at 50 percent now, but I'm 126 00:08:30,710 --> 00:08:32,300 ‫still not able to play this. 127 00:08:32,960 --> 00:08:33,330 ‫Why? 128 00:08:33,830 --> 00:08:37,610 ‫Because we have sodium restriction and we need to utilize our inactive you. 129 00:08:38,240 --> 00:08:41,270 ‫The first attribute here we need to use is control. 130 00:08:42,170 --> 00:08:48,170 ‫So once we passed this controls, that means now we have option to play and pause if I jump here. 131 00:08:48,770 --> 00:08:51,140 ‫You can see now we got an option to play and pause. 132 00:08:51,470 --> 00:08:54,320 ‫But before that, I need to use some weight as well as height. 133 00:08:54,890 --> 00:09:01,910 ‫So I'm going to use weight and I'm going to pass with as quality and haidar's 720. 134 00:09:04,130 --> 00:09:09,740 ‫Let me save this one now, control, give us play and pause, and all the other volume settings we can 135 00:09:09,740 --> 00:09:11,330 ‫hide is going to decrease the size. 136 00:09:11,630 --> 00:09:12,770 ‫Let me get back here. 137 00:09:16,820 --> 00:09:19,790 ‫This is working fine, but I still need to decrease the size. 138 00:09:21,430 --> 00:09:24,100 ‫Maybe I should utilize the 640 and 40. 139 00:09:27,580 --> 00:09:31,840 ‫Make sure you save everything, okay, this is better. 140 00:09:33,100 --> 00:09:36,940 ‫Here I am at 150 percent, so you can read things easily on your screen. 141 00:09:37,840 --> 00:09:39,690 ‫OK, now this is walking fine. 142 00:09:39,700 --> 00:09:46,330 ‫We have play pause for the screen escape and then we have this volume. 143 00:09:46,480 --> 00:09:49,090 ‫And we also have downloaded that option. 144 00:09:49,420 --> 00:09:52,840 ‫So these are the control with the help of our control attitude. 145 00:09:53,350 --> 00:09:57,790 ‫Now there are a lot of other things that you can do instead of adding thoughts here. 146 00:09:57,820 --> 00:10:00,580 ‫Maybe we need to add multiple other options. 147 00:10:00,610 --> 00:10:04,720 ‫What if this MP for Washington is not supported on the browser? 148 00:10:05,050 --> 00:10:09,730 ‫What we can do is we can add multiple videos for the same this video tag. 149 00:10:10,000 --> 00:10:14,710 ‫So instead of using this source here, what I can do is I can remove the source now. 150 00:10:18,670 --> 00:10:20,470 ‫Here I can are multiple sources. 151 00:10:20,660 --> 00:10:24,100 ‫So one will be the main one and the other ones will walk as backup. 152 00:10:24,490 --> 00:10:25,870 ‫And I can use saws. 153 00:10:26,350 --> 00:10:30,100 ‫And then all I need to define is the same as I see and then type. 154 00:10:30,550 --> 00:10:36,850 ‫All I have to do is use saws and inside that I'm going to pass as RC, which is the same thing that 155 00:10:36,850 --> 00:10:37,420 ‫we define. 156 00:10:37,750 --> 00:10:43,660 ‫And this is going to use media and then random and before. 157 00:10:43,870 --> 00:10:48,970 ‫And then here we need to find new type, which is and this is a video. 158 00:10:50,420 --> 00:10:53,110 ‫Slash and p three and P4, whatever that might. 159 00:10:53,510 --> 00:10:54,980 ‫If this is true before. 160 00:10:55,930 --> 00:11:02,770 ‫Now, maybe I have another radio just follow back up if this is not supported, if this MP vote is not 161 00:11:02,770 --> 00:11:03,310 ‫supported. 162 00:11:03,610 --> 00:11:09,550 ‫What I would do is I'm going to release the backup, so I need to find the source again had I don't 163 00:11:09,550 --> 00:11:10,720 ‫have any other MP. 164 00:11:11,290 --> 00:11:14,050 ‫So what I'm going to do is I'm going to find this absolute. 165 00:11:16,800 --> 00:11:18,210 ‫I should use hair. 166 00:11:18,450 --> 00:11:22,290 ‫Maybe I'm using WMT, Walmart or maybe I have. 167 00:11:22,530 --> 00:11:27,510 ‫Or give Walmart or any other Walmart that this order, if this doesn't work. 168 00:11:28,080 --> 00:11:33,300 ‫So maybe I have another file called W a re this extension. 169 00:11:34,430 --> 00:11:38,570 ‫So this work as a backup, if the first one doesn't work. 170 00:11:39,320 --> 00:11:40,570 ‫Let me save this one. 171 00:11:40,610 --> 00:11:43,310 ‫Get back here and refresh this one. 172 00:11:44,060 --> 00:11:45,250 ‫OK, this is fine. 173 00:11:46,950 --> 00:11:53,850 ‫Now, this video has so, Dana, that attribute you can use autoplay, you can use muted and few other 174 00:11:53,880 --> 00:11:56,490 ‫attributes by default for your video. 175 00:11:56,970 --> 00:11:59,970 ‫Maybe if I use this muted before dark. 176 00:12:01,310 --> 00:12:04,940 ‫Let me show you that by default, it's at full volume. 177 00:12:05,270 --> 00:12:12,920 ‫But if I jump here and use you there and say, Get back here now and you want to open this page by default, 178 00:12:12,920 --> 00:12:14,450 ‫this video will be muted. 179 00:12:14,990 --> 00:12:17,870 ‫These are a few common settings that you can utilize. 180 00:12:18,350 --> 00:12:20,240 ‫And this hope so and you are working with. 181 00:12:20,240 --> 00:12:22,620 ‫VIDEO So I hope you got the idea. 182 00:12:22,640 --> 00:12:24,740 ‫Something similar will be with audio. 183 00:12:24,770 --> 00:12:29,930 ‫I strongly recommend you to visit W3 School to understand more about this topic. 184 00:12:30,680 --> 00:12:32,510 ‫You are not going to utilize everything in. 185 00:12:33,440 --> 00:12:38,390 ‫And let me tell you, there will be certain things that you will learn as you move forward with the 186 00:12:38,390 --> 00:12:42,080 ‫whole journey on your own projects, on some projects that we are going to do. 187 00:12:42,470 --> 00:12:46,520 ‫If you click on audio now, you need to use something similar audio. 188 00:12:46,520 --> 00:12:52,460 ‫Then we need to provide control source exactly the same thing that we used with video. 189 00:12:52,910 --> 00:12:55,480 ‫You need to provide some backup and we need to provide this. 190 00:12:55,490 --> 00:12:57,380 ‫So I hope you got the idea. 191 00:12:57,710 --> 00:13:03,620 ‫And here you can also write message if both of them doesn't work so your browser does not support the 192 00:13:03,620 --> 00:13:04,280 ‫audio element. 193 00:13:05,120 --> 00:13:06,170 ‫Similarly, we can do one. 194 00:13:06,170 --> 00:13:11,210 ‫VIDEO I hope you got the idea about this media, which just about have you gone? 195 00:13:11,600 --> 00:13:16,830 ‫I don't know if everyone is fed media or not, but I hope you got the idea for. 196 00:13:17,420 --> 00:13:19,400 ‫Image video as well as audio. 197 00:13:20,630 --> 00:13:21,560 ‫Thank you for calling. 198 00:13:21,830 --> 00:13:25,820 ‫Make sure to test this out, make sure there are delays in Iran, no, you know that you have while 199 00:13:25,820 --> 00:13:27,350 ‫you can download it from resource. 200 00:13:28,190 --> 00:13:34,400 ‫Make sure to check out all the resources like Unsplash fixes and absolutely school, and I see ways 201 00:13:34,400 --> 00:13:35,030 ‫in the next one.