---
title: Iframe Plugin
sidebar_position: 3
---
## Overview
With this plugin, you can easily control the player in the `iframe` page in the `main page`.
For example, you can control the functions of the `iframe` player through code in the `main page`, or get the value of the `iframe` player.
## Demo
👉 [View Demo](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe)
## Install
### Install from `npm`:
```bash
$ npm install artplayer-plugin-iframe
```
### Install from `yarn`:
```bash
$ yarn add artplayer-plugin-iframe
```
### Install from `script`:
```html
```
Then you can access the plugin function through `window.artplayerPluginIframe`
## Use
### index.html
```html showLineNumbers title="index.html"
ArtPlayer
```
### iframe.html
```html showLineNumbers title="iframe.html"
ArtPlayer
```
## Instance Api
### commit
- Type: `Function`
Push message to iframe, the function will run inside the iframe
```js
iframe.commit(() => {
var art = new Artplayer({
container: '.artplayer-app',
url: 'path/to/video.mp4',
});
});
iframe.commit(() => {
art.seek = 5;
});
// Get the value from the iframe
(async function () {
// Use return keyword
var currentTime = await iframe.commit(() => {
return art.currentTime;
});
// Or use resolve method
var currentTime2 = await iframe.commit((resolve) => {
setTimeout(() => {
resolve(art.currentTime);
}, 1000);
});
})();
```
### message
- Type: `Function`
Receive message from the iframe
```js
iframe.message((event) => {
console.log(event);
});
```
### destroy
- Type: `Function`
Destroy the instance, cannot communicate with the iframe after destroy
```js
iframe.destroy();
```
## Iframe Api
:::danger Tip
The `Iframe Api` can only be used in `iframe`.
:::
### inject
- Type: `Function`
Inject the script, then can receive messages from the instance
```js
ArtplayerPluginIframe.inject();
```
### postMessage
- Type: `Function`
Push message to instance
```js
iframe.message((event) => {
console.log(event);
});
iframe.commit(() => {
ArtplayerPluginIframe.postMessage({
type: 'currentTime',
data: art.currentTime,
});
});
```