@@ -18,19 +18,24 @@ OR npm:
18
18
Then, tell Vue about the plugin (Note that the name of the variable here is up to you).
19
19
20
20
``` 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' ;
23
23
24
24
// 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);
32
26
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 ( ... );
34
39
```
35
40
36
41
This Vue plugin gives you access to a ` <vytia-player ytid="..."></vytia-player> ` component.
@@ -56,16 +61,16 @@ new Vue({
56
61
57
62
## How it works ?
58
63
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.
60
65
61
66
When the prop changes, the player will automatically load the new relevant video.
62
67
63
68
## Component Props
64
69
65
70
| prop | description | type | default |
66
71
| ------------| --------------------------------------------------------------------------------------------------------------| -----------------| ---------|
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 |
69
74
| width | the iframe's width note: youtube asks for 200 minimum | String | Number | 640 |
70
75
| height | the iframe's height note: youtube asks for 200 minimum | String | Number | 360 |
71
76
| 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.
93
98
94
99
| method | description | params |
95
100
| -----------| --------------------------------------------------------| -------------|
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 |
98
103
99
104
## Youtube Player instance
100
105
0 commit comments