WEBVTT

00:00:06.900 --> 00:00:10.250
Now we going to create the background video of our website.

00:00:10.470 --> 00:00:18.440
So first of all we need to get a video then we will need to create an email video elements inside the

00:00:18.440 --> 00:00:23.610
body elements of the index does a simple file and then we're going to style our video so that is appears

00:00:23.790 --> 00:00:26.820
fixed and spreading across the whole web page.

00:00:27.210 --> 00:00:27.870
OK.

00:00:28.020 --> 00:00:29.780
So first to get the video.

00:00:29.780 --> 00:00:33.270
There is a really good Web sites to get royalty free videos.

00:00:33.330 --> 00:00:38.650
It's called free video footage those come.

00:00:39.770 --> 00:00:40.300
OK.

00:00:40.500 --> 00:00:47.210
And you can browse videos there if you want to use the same video I'm using.

00:00:47.550 --> 00:00:51.140
You can just type free later.

00:00:52.560 --> 00:00:58.560
And that's the video music.

00:01:01.470 --> 00:01:08.460
So to download the video you would need to create a free account then log in and then you can download

00:01:08.460 --> 00:01:14.040
the video using one of these download links to create any shemale video elements.

00:01:14.040 --> 00:01:20.640
The best formats we can use is a before which is supported by most modern browsers.

00:01:20.670 --> 00:01:26.130
Unfortunately if you want to use the specific video there is no IP for farmers in the download links

00:01:26.130 --> 00:01:27.000
.

00:01:27.090 --> 00:01:36.960
So what I would do I would just go to the final link download the video from there and then go to Google

00:01:36.960 --> 00:01:43.970
and type converts to before and then you can find a really good Web site.

00:01:44.220 --> 00:01:48.500
So you would need to upload the video using this button.

00:01:48.690 --> 00:01:49.670
OK.

00:01:49.800 --> 00:01:51.870
And then you just follow the instructions.

00:01:51.870 --> 00:01:53.890
It's pretty straightforward.

00:01:53.890 --> 00:02:02.130
And then you would convert the video to a before and once you've done that then you're going to get

00:02:02.160 --> 00:02:12.270
the video on your desktop OK display it inside your party's fault.

00:02:14.150 --> 00:02:14.730
OK.

00:02:14.760 --> 00:02:19.120
So we're going to drag and drop the video there.

00:02:19.170 --> 00:02:25.170
Otherwise we can still persist in images.

00:02:26.690 --> 00:02:26.990
Right

00:02:31.680 --> 00:02:42.810
now we'll need to create the ASML elements or the ASML video elements inside the body elements.

00:02:42.810 --> 00:02:48.070
Now let's go for live preview.

00:02:51.510 --> 00:02:53.730
OK.

00:02:55.380 --> 00:03:02.150
So to create our e-mail video elements we're going to use the video tag.

00:03:03.780 --> 00:03:11.410
And then we're going to place some attributes inside the openside.

00:03:11.670 --> 00:03:16.080
So first of all he wants the video to auto play.

00:03:16.200 --> 00:03:16.790
OK.

00:03:16.800 --> 00:03:22.440
So we're going to see there also play.

00:03:22.440 --> 00:03:25.590
Also the video is going to play in loops.

00:03:26.010 --> 00:03:30.220
So you get the odd abuse loop now.

00:03:30.290 --> 00:03:35.880
So we don't want to hear any sound.

00:03:35.880 --> 00:03:38.430
So we can use the video.

00:03:39.040 --> 00:03:42.300
Also we're going to give our video and I.D.

00:03:45.360 --> 00:03:49.060
background video.

00:03:49.230 --> 00:03:49.780
OK.

00:03:49.860 --> 00:04:04.530
So inside the video tags will need to have another element source which will take if you ask me.

00:04:04.530 --> 00:04:07.550
So the first US is going to be the source of our video.

00:04:07.740 --> 00:04:15.520
So we're going to go to images and then we're going to go to the file nature video those before.

00:04:16.460 --> 00:04:17.070
OK.

00:04:17.130 --> 00:04:23.550
Also we are going to specify the type of file.

00:04:26.430 --> 00:04:31.630
So the type here is going to be video for Slash and before.

00:04:32.640 --> 00:04:36.260
So the syntax for people videos.

00:04:37.130 --> 00:04:37.700
OK.

00:04:37.950 --> 00:04:41.400
So to save this refresh the page

00:04:44.520 --> 00:04:47.590
so we can see our video there.

00:04:47.610 --> 00:04:48.400
OK.

00:04:48.720 --> 00:04:58.350
Now let's write some siestas code so that we can make the video fixed in the background and also make

00:04:58.350 --> 00:05:06.740
it spread across the web page.

00:05:06.810 --> 00:05:09.570
So first let's access the video.

00:05:10.520 --> 00:05:11.220
OK.

00:05:11.280 --> 00:05:19.380
So we can use the ID of the video straightaway just like this background video.

00:05:19.380 --> 00:05:22.450
Otherwise we can start with the video tag.

00:05:23.760 --> 00:05:25.750
And then the ID.

00:05:26.670 --> 00:05:29.860
OK so now we want to fix the video.

00:05:30.000 --> 00:05:30.750
OK.

00:05:30.840 --> 00:05:38.100
So we're going to give it a positioned property of fixed.

00:05:38.340 --> 00:05:39.120
OK.

00:05:39.290 --> 00:05:43.410
And now the video is going to be fixed.

00:05:43.440 --> 00:05:52.920
Now if I increase the width of my browser then at some points we'll see that the video is not taking

00:05:52.920 --> 00:05:55.250
the full width of the page.

00:05:55.250 --> 00:05:55.780
Right.

00:05:56.220 --> 00:06:06.630
So the height looks fine for my screen but for a bigger screen probably the height would be small for

00:06:06.630 --> 00:06:08.750
the screen height.

00:06:08.940 --> 00:06:15.810
So to make sure that the video is spreading across the whole web page in all devices we will need to

00:06:16.890 --> 00:06:21.940
specify two properties the minimum height and the minimum wage.

00:06:22.080 --> 00:06:26.510
And both of them we're going to set them to 100 percent.

00:06:28.200 --> 00:06:29.980
OK.

00:06:31.080 --> 00:06:40.500
So now we are sure that the video spreads across the whole wide web site all the time.

00:06:41.580 --> 00:06:45.500
I'm spreading the increase increasing the with from the other side.

00:06:45.540 --> 00:06:50.180
On the other screen and I can see that the video is all the same.

00:06:50.930 --> 00:06:54.280
OK.

00:06:54.300 --> 00:06:57.120
All right.

00:06:57.450 --> 00:07:02.250
Now the final thing we're going to do for our video is to make sure that he's appears behind all the

00:07:02.250 --> 00:07:03.750
other elements.

00:07:03.990 --> 00:07:06.210
Police are going to use the Zad index.

00:07:06.390 --> 00:07:09.840
So we're going to give it a real low that index a negative one.

00:07:10.110 --> 00:07:10.770
OK.

00:07:10.770 --> 00:07:15.010
Now you're sure that's the video is behind everything else.

00:07:16.100 --> 00:07:16.750
OK.

00:07:17.070 --> 00:07:20.650
We might not really need these that index for our web sites.

00:07:20.730 --> 00:07:27.660
Ok but if you're developing another Web sites and you have some other elements with different indexes

00:07:27.660 --> 00:07:33.190
then just make sure that you give the video a reload that index just like this.

00:07:33.810 --> 00:07:35.520
OK.

00:07:35.610 --> 00:07:41.830
Now let's go back to our Index was a simple file and create our navigation bar