# Player
The VirtualCar360 Player is a ready-made visual component designed for embedding on websites. It works as an external widget loaded through an `iframe`, so it does not require implementing a custom photo gallery, hotspot handling, zoom logic or gallery lookup logic.
div
iframe
The Player can be used:
- on offer listings,
- as the main slider on a vehicle detail page,
- as an additional element in the vehicle description,
- as an interactive vehicle gallery,
- as a component presenting photos, hotspots, the vehicle certificate and other offers from the same location.
The Player can be loaded using **carId**, **VIN** or the **registration number**. Once a vehicle identifier is provided, the Player automatically finds the latest available presentation and displays it to the user.
Tip
`carId` is the internal Player identifier and allows you to point to a specific vehicle presentation. In many practical integrations, using `vin` or `numberplates` can be more convenient because these values are easier to match with an offer in a dealer system, CRM or website. In that case, the system automatically finds and displays the latest Player available for the vehicle.
## How it works
The Player is embedded as an `iframe` pointing to:
```txt
https://virtualcar360.pl/player/
```
The required parameters are passed in the query string.
Minimal configuration requires:
- a vehicle identifier: `carId`, `vin` or `numberplates`,
- an API key: `key`.
After loading, the Player:
1. reads the URL parameters,
2. identifies the vehicle or Player,
3. retrieves the latest available data when VIN or registration number is used,
4. renders photos, available image sets, hotspots and additional presentation elements,
5. allows users to browse and zoom photos.
## URL parameters
| Parameter | Required | Description |
| --- | --- | --- |
| `carId` | conditional | Internal Player identifier. It points to a specific presentation. |
| `vin` | conditional | Vehicle VIN. Required if `carId` and `numberplates` are not provided. |
| `numberplates` | conditional | Vehicle registration number. Required if `carId` and `vin` are not provided. |
| `key` | yes | API key assigned to a VirtualCar360 account, location or group. |
Important
A single Player URL should contain only one vehicle identifier: `carId`, `vin` or `numberplates`. There is no need to pass multiple identifiers at the same time.
## Embed by `carId`
```html
```
## Embed by VIN
```html
```
## Embed by registration number
```html
```
## Responsive embed
```html
```
```css
.vc360-player-wrapper {
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.vc360-player-wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
```
Tip
On offer listings, use `loading="lazy"` so the Player loads only when the vehicle card appears in the user's viewport. This reduces the number of Players loaded at the same time and improves page performance.
## Angular integration example
```ts
import { CommonModule } from '@angular/common';
import { Component, Input, OnChanges } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@Component({
selector: 'vc360-player',
standalone: true,
imports: [CommonModule],
template: `
`,
})
export class VirtualCarPlayerComponent implements OnChanges {
@Input() carId?: string | number;
@Input() vin?: string;
@Input() numberplates?: string;
@Input({ required: true }) apiKey!: string;
playerUrl?: SafeResourceUrl;
constructor(private readonly sanitizer: DomSanitizer) {}
ngOnChanges(): void {
const url = new URL('https://virtualcar360.pl/player/');
if (this.carId) {
url.searchParams.set('carId', String(this.carId));
} else if (this.vin) {
url.searchParams.set('vin', this.vin);
} else if (this.numberplates) {
url.searchParams.set('numberplates', this.numberplates);
} else {
throw new Error('carId, VIN or registration number is required.');
}
url.searchParams.set('key', this.apiKey);
this.playerUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url.toString());
}
}
```
## Displayed data
The data displayed by the Player depends on the materials available for the vehicle gallery. The Player can display:
- exterior photos with closed doors,
- photos with open doors,
- additional photos,
- interior panoramas,
- interactive gimbal photos,
- hotspots,
- the vehicle certificate,
- other offers from the same location.
If a gallery does not contain a specific material type, the Player can skip it and display the remaining available data.
## Hotspots
Hotspots are part of the Player and allow specific elements to be marked directly on vehicle photos. A hotspot may indicate a headlight, wheel, equipment item, scratch, damage, body detail or interior element.
A hotspot may include additional photos showing the marked element in a close-up. This turns the Player into an interactive tool for presenting vehicle condition and details, not only a standard photo gallery.