feat: add attribute selector

README.md

@@ -33,14 +33,24 @@ imports: [
 ],
 ```
 
-Finally use `plyr` in your components:
+Finally use `plyr` in your components as attribute:
+
+```html
+<div plyr style="width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlay)="played($event)"></div>
+
+<button (click)="play()">Play</button>
+```
+
+or tag:
 
 ```html
 <plyr style="display:block; width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlay)="played($event)"></plyr>
 
 <button (click)="play()">Play</button>
 ```
 
+and the component file would have
+
 ```ts
 @ViewChild(PlyrComponent)
 plyr: PlyrComponent;

projects/ngx-plyr/src/lib/plyr/plyr.component.ts

@@ -4,7 +4,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import { filter, switchMap } from 'rxjs/operators';
 
 @Component({
-  selector: 'plyr', // tslint:disable-line
+  selector: 'plyr, [plyr]', // tslint:disable-line
   templateUrl: './plyr.component.html',
   styleUrls: ['./plyr.component.css'],
   exportAs: 'plyr'

src/app/app.component.html

@@ -1,5 +1,5 @@
 <h1>{{ title }}</h1>
 
-<plyr style="display:block; width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlay)="played($event)"></plyr>
+<div plyr style="width: 640px;" plyrTitle="Video 1" [plyrSources]="videoSources" (plyrPlay)="played($event)"></div>
 
 <button (click)="play()">Play</button>