Awesome
! Not maintained
Youtube Player Aurelia Plugin
Plugin for integrating Youtube iFrame embeds.
The plugin is implemented as aurelia customAttribute
.
Basic Usage
Inside <div>
container add another div with the customAttribute
:
<div class="YourYoutubePlayerContainer">
<div yt-player="YE7VzlLtp-4"></div>
</div>
Note:
yt-player
value receives the Youtube video ID for the player to play. Make sure to set width and height (can be dynamic) ofYourYoutubePlayerContainer
. The internal<div yt-player="YE7VzlLtp-4"></div>
is replaced by<iframe>
which has width and height set to 100%. ChangingYourYoutubePlayerContainer
size will adjust the video frame size dynamically.
You can dynamically change the Youtube video ID, using something like:
<template>
<div class="YourYoutubePlayerContainer">
<div yt-player="${videoId}"></div>
</div>
</template>
Where videoId
is property of your custom element.
Note: Youtube requires loading of
www.youtube.com/iframe_api
script. You need to load it manually before the plugin is initialized or read theInitialization Event
below.
Events
The plugin makes use of aurelia-event-aggregator
to publish different events.
Initialization Event
ytplayer:init:getScript
published when the plugin detects www.youtube.com/iframe_api
is loaded.
Event payload:
{
publisher: this,
data: 'https://www.youtube.com/iframe_api'
};
Your application should load the script when receiving this event. If you use jQuery, you could use something like:
import {inject} from 'aurelia-dependency-injection';
import $ from 'jquery';
import {EventAggregator} from 'aurelia-event-aggregator';
@inject(EventAggregator)
export class App {
constructor(eventAggregator) {
this.eventAggregator = eventAggregator;
this.eventAggregator.subscribe('ytplayer:init:getScript', payload => {
$.getScript(payload.data);
});
/* .... */
}
/*...*/
}
Note: Youtube requires CORS request so using non csp
System.import(...)
won't work. That's why to reduce number of dependencies and maximum flexibility the plugin publishes event instead of loading the script.
Load Events
ytplayer:load:player
published when plugin loads the Youtube player.
ytplayer:load:video
published when plugin loads new video.
Events payload is PlayerAPI
object.
Player state Events
Delegation of Youtube player onStateChange events
ytplayer:state:cued
ytplayer:state:ended
ytplayer:state:playing
ytplayer:state:paused
ytplayer:state:buffering
ytplayer:state:unstarted
Events payload is PlayerAPI
object.
Player error Events
Delegation of Youtube player onError events
ytplayer:error:invalid-param
ytplayer:error:html5
ytplayer:error:not-found
ytplayer:error:access-denied
ytplayer:error:unknown
Events payload is PlayerAPI
object.
PlayerAPI
Wrapper of Youtube player.
Payload of most of the events and can be used to interact with the player.
interface PlayerAPI {
play(): void;
pause(): void;
getVideoId(): String;
getDuration(): Number;
/* DOM element of the embed-code. Especialy usefull if you have number of players */
getContainer(): Object;
}
TODO
Add configuration options to plugin. Current defaults:
quality = 'hd720';
height = '100%';
width = '100%';
params = {
enablejsapi: 1,
//origin: '' specify in production
autoplay: 0,
showinfo: 0
};
Based on aurelia-skeleton-plugin
This skeleton is part of the Aurelia platform. It sets up a standard aurelia plugin using gulp to build your ES6 code with the Babel compiler. Karma/Jasmine testing is also configured.
To keep up to date on Aurelia, please visit and subscribe to the official blog. If you have questions, we invite you to join us on Gitter. If you would like to have deeper insight into our development process, please install the ZenHub Chrome Extension and visit any of our repository's boards. You can get an overview of all Aurelia work by visiting the framework board.
Building The Code
To build the code, follow these steps.
- Ensure that NodeJS is installed. This provides the platform on which the build tooling runs.
- From the project folder, execute the following command:
npm install
- Ensure that Gulp is installed. If you need to install it, use the following command:
npm install -g gulp
- To build the code, you can now run:
gulp build
-
You will find the compiled code in the
dist
folder, available in three module formats: AMD, CommonJS and ES6. -
See
gulpfile.js
for other tasks related to generating the docs and linting.
Running The Tests
To run the unit tests, first ensure that you have followed the steps above in order to install all dependencies and successfully build the library. Once you have done that, proceed with these additional steps:
- Ensure that the Karma CLI is installed. If you need to install it, use the following command:
npm install -g karma-cli
- Ensure that jspm is installed. If you need to install it, use the following commnand:
npm install -g jspm
- Install the client-side dependencies with jspm:
jspm install
- You can now run the tests with this command:
karma start