Other – Video 360°

Product loop – embedding

You can easily embed a recorded 360° video of your product on your website. Use our recording tools available in the viewer or configurator menu to capture your product. Adjust the recording quality, browser size and camera behavior in the record settings, then press record. Once the video loop is ready, download it and follow the example to add it to your page.

Example Video Settings

Note: Settings may vary depending on device specifications, browser, and requirements

  • Recording Codecs: webm / VP9 you can check html5 video support
  • Quality: High
  • Frame rate: 60 fps
  • Recording mode: Product 360 - Model Loop
  • Speed: Medium
Open in new tab
Docs Other - Video 360° embedding — live preview / embed demo (Vanilla JS).
index.html
1<!DOCTYPE html>
2 <html>
3   <head>
4     <title>Docs Basics - Video 360° product loop</title>
5     <meta charset="utf-8" />
6     <meta name="viewport" content="width=device-width, initial-scale=1" />
7 
8     <style>
9       * {
10         box-sizing: border-box;
11       }
12 
13       html,
14       body,
15       #root {
16         width: 100%;
17         height: 100%;
18         margin: 0;
19         padding: 0;
20       }
21 
22       body{
23         display: grid;
24         justify-content: center;
25         align-items: center;
26       }
27 
28       video {
29         background-color: white !important;
30         outline: none;
31         clip-path: inset(-10px);
32         outline:none;
33         border: none;
34       }
35 
36       .vjs-poster{
37         background-color: transparent !important;
38       }
39 
40       video:focus { 
41         outline:none; 
42       }
43     </style>
44     <link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
45   </head>
46   <body>
47     <script src="https://unpkg.com/focus-visible"></script>
48     <video
49         id="my-video"
50         class="video-js"
51         loop autoplay muted
52         preload="auto"
53         width="348"
54         height="348"
55         poster="https://raw.githubusercontent.com/alterproduct/examples-vanilla-js/refs/heads/main/other-video-360-product-loop/assets/video-360-loop-embeding-poster.png"
56         data-setup="{}"
57     >
58       <source src="https://github.com/alterproduct/examples-vanilla-js/raw/refs/heads/main/other-video-360-product-loop/assets/video-360-loop-embeding.webm" type="video/webm"/>
59         <p class="vjs-no-js">
60           To view this video please enable JavaScript, and consider upgrading to a web browser that
61           <a href="https://videojs.com/html5-video-support/" target="_blank">
62             supports HTML5 video
63           </a>
64         </p>
65       </video>
66     <script src="https://vjs.zencdn.net/8.16.1/video.js"></script>
67   </body>
68 </html>
Open the project on GitHub Github Logo