<style> body {margin: 0;padding: 0;}</style>
<my-app />
/*
* reframe.js - Reframe.js: responsive iframes for embedded content
* @version v2.1.13
* @link https://github.com/dollarshaveclub/reframe.js#readme
* @author Jeff Wainwright <jjwainwright2@gmail.com> (http://jeffry.in)
* @license MIT
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.reframe=t()}(this,function(){"use strict";return function(e,t){var i="string"==typeof e?document.querySelectorAll(e):e,n=t||"js-reframe";"length"in i||(i=[i]);for(var o=0;o<i.length;o+=1){var r=i[o];if(-1!==r.className.split(" ").indexOf(n))return;var f=r.offsetHeight/r.offsetWidth*100,d=document.createElement("div");d.className=n;var a=d.style;a.position="relative",a.width="100%",a.paddingTop=f+"%";var s=r.style;s.position="absolute",s.width="100%",s.height="100%",s.left="0",s.top="0",r.parentNode.insertBefore(d,r),r.parentNode.removeChild(r),d.appendChild(r)}}});
// import does not work in Codepen
// using const instead
const {Component, OnInit, Input} = ng.core;
const {bootstrap} = ng.platform.browser;
@Component({
selector: 'my-app',
template: `<div class="max-width-1024">
<div class="embed-responsive embed-responsive-16by9" id="player">
</div>
</div>`,
styles: [`.max-width-1024 { max-width: 1024px; margin: 0 auto; }`],
})
class MyAppComponent implements OnInit {
public video: String;
public YT: any;
public player: any;
public reframed: Boolean = false;
constructor() { }
init() {
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
ngOnInit() {
this.init();
this.video = '1cH2cerUpMQ' //video id
window['onYouTubeIframeAPIReady'] = (e) => {
this.YT = window['YT'];
this.reframed = false;
this.player = new window['YT'].Player('player', {
videoId: this.video,
events: {
'onStateChange': this.onPlayerStateChange.bind(this),
'onError': this.onPlayerError.bind(this),
'onReady': (e) => {
if (!this.reframed) {
this.reframed = true;
reframe(e.target.a);
}
}
}
});
};
}
onPlayerStateChange(event) {
console.log(event)
switch (event.data) {
case window['YT'].PlayerState.PLAYING:
if (this.cleanTime() == 0) {
console.log('started ' + this.cleanTime());
} else {
console.log('playing ' + this.cleanTime())
};
break;
case window['YT'].PlayerState.PAUSED:
if (this.player.getDuration() - this.player.getCurrentTime() != 0) {
console.log('paused' + ' @ ' + this.cleanTime());
};
break;
case window['YT'].PlayerState.ENDED:
console.log('ended ');
break;
};
};
//utility
cleanTime() {
return Math.round(this.player.getCurrentTime())
};
onPlayerError(event) {
switch (event.data) {
case 2:
console.log('' + this.video)
break;
case 100:
break;
case 101 || 150:
break;
};
};
}
bootstrap(MyAppComponent);
View Compiled
This Pen doesn't use any external CSS resources.