0:00
Hi guys, welcome back to the new video of Easy Tutorials and today in this video you will see
0:05
how to add a 360 degree images on your website. Here you can see on my web page in the right side
0:11
I have one image and you can see I can rotate this image in all direction. I can rotate it in
0:17
360 degree view. You will learn how to add this type of images on your website. First, you should
0:23
have one 360 degree image. So come to this website and click on this link and here you will find 360
0:36
degree images and you can use this image on your website for free. So let me scroll down so that
0:43
you can see here we have multiple images. So let's open any image here
0:52
and now you can see I can drag this image to view it in all the directions. I can rotate this image in 360 angle
1:05
So simply download this image. So let me open my folder and here I have already downloaded one
1:10
image. When you will download these images you will get the image in .jpg file and if you will
1:16
simply upload this image on your website you won't be able to see it in the all 360 angles
1:22
First, I need one web page for that I will create index.html file
1:29
and now I will open this file with any text editor. So I'm using brackets editor here
1:35
First, I will write some basic HTML structures. So in the body tag we will create one div and the class name I'm writing imgbox
1:54
Now we will come to this website momento360 and create an account
2:05
and then click on this icon and upload your image. So let me upload this image
2:17
wait for few seconds and click on this image then click on this share icon
2:28
then click on this button and it will give you this code. So just copy it and come to the HTML file
2:38
Here we will write iframe. We will set one width so I'm writing 600 pixel and height 350 pixel
2:48
then frame border 0 there will be no border. Then write src and paste the URL that you have copied
2:58
That's it. Save these changes. Now I will open this HTML file with any browser
3:04
Now you can see this image on this web page and we can rotate it in all the directions
3:14
Let's come back to the HTML file and in the head we will write a style open and close
3:18
Open and close. Let's copy this class name add it here and for this one we'll write margin 150 pixel auto
3:32
then text align center. Now you can see this image in the center
3:42
I hope this video will be helpful for you. If so, please hit the like button and share this video
3:47
Thank you so much for watching this video
