Skip to content

Commit 72aaa0d

Browse files
authored
Update README.md
1 parent 269ce7f commit 72aaa0d

File tree

1 file changed

+20
-15
lines changed

1 file changed

+20
-15
lines changed

Diff for: README.md

+20-15
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,24 @@ OR npm:
1818
Then, tell Vue about the plugin (Note that the name of the variable here is up to you).
1919

2020
```javascript
21-
import Vue from 'vue'
22-
import VuePlayerPlugin from 'vue-youtube-iframe-api'
21+
import Vue from 'vue';
22+
import Vytia from 'vue-youtube-iframe-api';
2323

2424
// simple way
25-
Vue.use(VuePlayerPlugin)
26-
// OR, with configuration
27-
Vue.use(VuePlayerPlugin, {
28-
with: '', // optional, used to set global width on all futur instance
29-
height: '' // optional, used to set global width on all futur instance
30-
loadComponent: true // create the global player component <vytia-player></vytia-player>
31-
})
25+
Vue.use(Vytia);
3226

33-
new Vue( ... )
27+
// OR, with configuration
28+
Vue.use(Vytia, {
29+
scriptUrl: null, // API url, OPTIONAL, default: https://www.youtube.com/iframe_api
30+
width: null, // global player width, OPTIONAL, default: 640
31+
height: null, // global player height, OPTIONAL, default: 360
32+
playerVars: null, // global playerVars, OPTIONAL, default: {}
33+
onLoad: null, // iframe loaded callback function, OPTIONAL
34+
onError: null, // iframe load failed callback function, OPTIONAL
35+
});
36+
37+
// instan your Vue app
38+
new Vue( ... );
3439
```
3540

3641
This Vue plugin gives you access to a `<vytia-player ytid="..."></vytia-player>` component.
@@ -56,16 +61,16 @@ new Vue({
5661

5762
## How it works ?
5863

59-
Just add the component where you want with either a **ytid** or **yturl** prop.
64+
Just add the component where you want with either a **id** or **url** prop.
6065

6166
When the prop changes, the player will automatically load the new relevant video.
6267

6368
## Component Props
6469

6570
| prop | description | type | default |
6671
|------------|--------------------------------------------------------------------------------------------------------------|-----------------|---------|
67-
| ytid | the youtube video id (found in the url) note: both "ytid" & "yturl" can't be used at the same time | String | null |
68-
| yturl | the youtube video url (the id will be auto-detected) note: both "ytid" & "yturl" can't be used at the same time | String | null |
72+
| id | youtube video id note: both "ytid" & "yturl" can't be used at the same time | String | null |
73+
| url | youtube video url note: both "ytid" & "yturl" can't be used at the same time | String | null |
6974
| width | the iframe's width note: youtube asks for 200 minimum | String | Number | 640 |
7075
| height | the iframe's height note: youtube asks for 200 minimum | String | Number | 360 |
7176
| playerVars | the iframe's player variables, full list: https://developers.google.com/youtube/player_parameters?hl=fr | Object | {} |
@@ -93,8 +98,8 @@ You can access these methods by adding a **ref** on the component.
9398

9499
| method | description | params |
95100
|-----------|--------------------------------------------------------|-------------|
96-
| loadById | programatically loads a new video on the player by ID | id: String |
97-
| loadByUrl | programatically loads a new video on the player by URL | url: String |
101+
| loadById | programatically loads a new video on the player by ID | id: String, options: Object |
102+
| loadByUrl | programatically loads a new video on the player by URL | url: String, options: Object |
98103

99104
## Youtube Player instance
100105

0 commit comments

Comments
 (0)