0:00
Hello everyone, welcome back to the new video of easy tutorials and today in this video
0:11
I'll create a pop-up box that will display a video as you can see on my computer screen
0:17
right now. Once I'll click on this play button, it will display the first video
0:34
Now I'll click on somewhere else so it will close this pop-up box
0:41
Now I'll click on the second play button so it will display the second video
0:54
Let's click on the third play button so it will play the third video
1:01
You can see this control options also I can pause and play this video
1:08
Then you can move forward and backward this video
1:18
You can also make this video full screen and again come back to the small window
1:30
So in this video you will learn to create this pop-up box that will contain a video
1:36
Before starting this video, I'll request you to please subscribe my channel Easy Tutorials
1:40
to watch more videos like this one. Now let's start this tutorial
1:49
This is my project folder and here we have three videos and we have three images also
1:57
and this one is HTML file. This is a play button image and this is CSS file
2:05
Now I'll go to my text editor and here it is my CSS file and this one is HTML file
2:13
Here you can see I have already connected my CSS with HTML file
2:18
Now we'll add some bootstrap link for that simply go to the Google and search bootstrap
2:38
From here we'll copy this code and add it into the head
2:53
Now again come back to this website and again we'll copy these scripts and paste it here
3:01
in head. The second one we don't need so I'll delete this one
3:13
These text also we can remove. Now after adding this bootstrap link, we'll come to the body area and here we'll create
3:23
one div. The class name will be container and one more class name that is text center
3:43
Now I'll add one heading here. So I'm using h1 tag and here I'll write on click video popup
4:02
Now I'll open my web page with Google Chrome so that you can see this title over here
4:15
Then we have to create three columns for that I'm using one row and in this row we'll create
4:22
three column. So I'm using this class name called MD4 and in the first column I'm adding one image
4:31
This is my image file name image1.png and one class also img-float
4:39
Now I'll refresh my web page so that you can see this first image here
4:57
After this image we'll add one play icon also. So this is my play icon file name playicon.png
5:04
So you can see this play icon just below this image. Now let's come to the CSS and first we'll write background color important
5:31
Now we'll use this class name container and for this container I'll write margin-top
5:43
After that I'll write h1 and for this h1 I'll write margin-bottom
5:51
Now you can see this space from the top
6:04
Let's write one class name for this play button play-btn and we'll just use this class name
6:11
in CSS file. And for this play-btn I'm writing width 50px, position relative top-50%, cursor pointer
6:34
and transition 0.5 second. Now you can see this play-btn in center
6:51
Now we have to hide this play-btn for that I'll write opacity 0
7:04
Let's come to the HTML file and we'll write this class name here call md4 hover.play-btn
7:14
opacity 1. After refreshing this page, you can see once I'll take cursor over this image, it will
7:25
display the play button and when I'll remove this cursor from this image, it will hide
7:32
this play-btn. Let's duplicate this column to create the second one
7:44
So this will be the second column. I'll change the image image2.png and let's add it again
7:51
So this is the third column image3.png. Now you can see the three columns
8:04
There is some mistake here. Sorry, we need to correct this spelling
8:16
Now you can see proper alignment for all these three columns. So let's go to the bootstrap site, click on the documentation, then click on components
8:31
and select this one model. Scroll down
8:42
And here you can see vertically centered. So just I'll copy this one and add it into the button
8:53
That is play button here. For second button also. For third one also
9:05
Now we'll copy this entire script
9:36
Now refresh this website so that you can see a pop-up window when I'll click on this play-btn
9:46
Here we can remove this model footer. And this header also
10:07
In this body, I'll write one message. Hello. Let's refresh this page so that you can see this hello message when I will click on this button
10:27
We can also remove this text. Now it is very simple
10:43
Right now you can see one message here that I'll remove now
10:47
And here we'll add one video. I'll write width 100%
10:58
Then video source I'll write. This is my video file name video1.mp4
11:06
Then we have to write type video slash mp4. Now refresh this page so that you can see a video here when I'll click on this button
11:22
Here we will add one controls. Now let's click on this one so that you can see this control buttons also
11:29
And when I will click on this button, this video will start playing
11:41
Simply I'll duplicate this one to add different video in different play button
11:49
So this will be the second video
12:03
Now we'll change this ID also. Here I'm writing one ID play video1, play video2 and play video3
12:15
So we are using three different ID. And this same ID we will use in button also
12:26
That is data target. So here I'm writing play video3. This one is play video2
12:34
And the first one play video1. Let's refresh this page and click on this button so that you can see different videos
12:45
when I will click on this different button. Now we'll remove this border for that
12:54
Let's come to the HTML file. Copy this class name model-content, background-transparent, border-none
13:20
Let's come to the website again and click on this button so that you can see there is
13:24
no border for this video. Now we'll add autoplay and loop for this video
13:38
So simply add this one autoplay and loop. Just copy and paste it in the second one also and for third one also
13:50
That's it. Let's come to the website and refresh this one. And now you can see this video is playing automatically when I will click on this button
14:11
So this is how you can easily create a pop-up video on your website
14:15
If this video is helpful for you, please click on the like button and also subscribe my channel
14:20
for more easy tutorials to watch more videos like this one. Thank you so much for watching
