An Ember.js component to play and control YouTube videos using the iframe API. Pass it a YouTube video ID and you're good to go! Every day this component is being used on Radio4000.
You can see a demonstration at ember-youtube.surge.sh.
- Full support for all YouTube player events (and errors)
- Custom (external) controls (make your own buttons)
- Custom progress bar in full sync with the YouTube player
- Extra: custom time properties (for instance "4:31 / 7:58") formatted with Moment.js
Inside your Ember CLI project run:
ember install ember-youtube
Use the component like this:
Here's another example with all options. Only ytid
is required.
The YouTube API allows you to define an object of options called playerVars. With ember-youtube, you can optionally set this object on the component:
// controller.js
myPlayerVars: {
autoplay: 1,
showinfo: 0
}
If you want your own buttons to control the player there are two steps.
- Make the ember-youtube component available to the outside, which normally means your controller. You do this with the
delegate
anddelegate-as
properties of ember-youtube. They expose the component and give you a target for your button's actions. Like this:
- Specify a target on your actions. Now, and because we used
delegate
anddelegate-as
, you'll have aemberYoutube
property on your controller. This is where we'll target our actions. It allows you to do this in the template where you include the player:
You could also do this:
Here's an example of seeking to a certain timestamp in a video. It accepts a number of seconds.
The ember-youtube component send four different actions: playing
, paused
, ended
and buffering
. You should map them to your own actions like this:
actions: {
ytPlaying() {
Ember.debug('on playing from controller');
},
ytPaused() {
Ember.debug('on paused from controller');
},
ytEnded() {
Ember.debug('on ended from controller');
// here you could load another video by changing the youTubeId
},
ytBuffering() {
Ember.debug('on buffering from controller');
}
}
Even if you don't supply an ytid
to the ember-youtube component, it will make sure the iframe player is created as soon as possible. But if you set lazyload=true
, it will wait for an ytid
. This will, in some cases, improve the initial render performance. Example:
Let's write a component with two custom formatted timestamps such as "13:37". First make sure moment and moment-duration-format are installed. Then create a new component with the following template:
And here's the JavaScript part of the component:
export default Ember.Component.extend({
currentTimeFormat: 'mm:ss',
durationFormat: 'mm:ss',
// returns a momentJS formated date based on "currentTimeFormat" property
currentTimeFormatted: computed('emberYoutube.currentTime', 'currentTimeFormat', function () {
let time = this.get('emberYoutube.currentTime');
let format = this.get('currentTimeFormat');
if (!time || !format) {
return null;
}
let duration = moment.duration(time, 'seconds');
return duration.format(format);
}),
// returns a momentJS formated date based on "durationFormat" property
durationFormatted: computed('emberYoutube.duration', 'durationFormat', function () {
let duration = this.get('emberYoutube.duration');
let format = this.get('durationFormat');
if (!duration || !format) {
return null;
}
let time = moment.duration(duration, 'seconds');
return time.format(format);
})
});
On iOS autoplay of videos is disabled by Apple to save your precious data. I haven't been able to circumvent this. The user needs to tap the video itself before we can call the player's play/load methods. If anyone has a workaround, let me know.
git clone
this repositorynpm install; bower install
ember server
- Visit your app at http://localhost:4200.
ember test
ember test --server
- https://www.npmjs.com/package/react-youtube
- http://cejast.github.io/ng-youtube/
- https://github.com/brandly/angular-youtube-embed
- https://github.com/gilesvangruisen/Swift-YouTube-Player
- https://github.com/mikecrittenden/tangletube
Please file an issue if you have any feedback or would like to contribute.
Thanks to https://github.com/oskarrough/ember-youtube/graphs/contributors.