The Space Force

index.html

<script type="module" src="js/player.js"></script>
<script type="text/javascript">
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
<script>
  function onYouTubeIframeAPIReady(){
    StartVideo = new YouTubePlayer($("#topPlayer").get(0), "M6bumUQwQIU", 16.0/9.0);
  }
</script>

player.js

var YouTubePlayer = (function () {
    function YouTubePlayer(panel, videoId, aspectRatio) {
        var _this = this;
        this.panel = panel;
        this.aspectRatio = aspectRatio;
        var size = this.CalcVideoSize();
        this.Player = new YT.Player(panel, {
            videoId: videoId,
            height: size.Height,
            width: size.Width,
            events: {
                onReady: function () {
                    _this.Player.playVideo();
                }
            },
            playerVars: {
                autoplay: YT.AutoPlay.AutoPlay,
                playsinline: YT.PlaysInline.Inline
            }
        });
        window.onresize = function () {
            if (_this.Player != null) {
                size = _this.CalcVideoSize();
                _this.Player.setSize(size.Width, size.Height);
            }
        };
    }
    YouTubePlayer.prototype.CalcVideoSize = function () {
        var width = Math.floor($(this.panel).width() * 0.98);
        var height = Math.floor(width * this.aspectRatio);
        return {
            Width: width,
            Height: height
        };
    };
    return YouTubePlayer;
}());
export { YouTubePlayer };
//# sourceMappingURL=player.js.map

player.ts

///<reference path="../node_modules/@types/jquery/index.d.ts"/>
///<reference path="../node_modules/@types/knockout/index.d.ts"/>
///<reference path="../node_modules/@types/youtube/index.d.ts"/>
///<reference path="../node_modules/@types/youtube-player/index.d.ts"/>
declare var StartVideo : YouTubePlayer;
/*export function onYouTubeIframeAPIReady() : void{
    StartVideo = new YouTubePlayer($("#topPlayer").get(0), "M6bumUQwQIU", 16.0/9.0);
}*/

export class YouTubePlayer{
    protected Player : YT.Player;
    constructor(protected panel : HTMLElement, videoId: string, protected aspectRatio : number){
        var size = this.CalcVideoSize();
        this.Player = new YT.Player(panel, {
            videoId: videoId,
            height: size.Height,
            width: size.Width,
            events: {
                onReady: () =>{
                    this.Player.playVideo();
                }
            },
            playerVars:{
                autoplay: YT.AutoPlay.AutoPlay,
                playsinline: YT.PlaysInline.Inline
            }
        });
        window.onresize = ()=>{
            if(this.Player != null){
                size = this.CalcVideoSize();
                this.Player.setSize(size.Width, size.Height);
            }
        };
    }
    protected CalcVideoSize() : VideoSize{
        var width = Math.floor($(this.panel).width() * 0.98);
        var height = Math.floor(width*this.aspectRatio)
        return{
            Width: width,
            Height: height
        }
    }
}
export interface VideoSize{
    Width: number;
    Height: number;
}

tsconfig.json

{
  "forceConsitentCasingInFileNames": true,
  "noImplicitReturns": true,
  "strict": true,
  "noUnusedLocals": true,
  "compilerOptions": {
    "module": "es6",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true
  },
  "include": ["js", "**/*.ts"],
  "exclude": ["node_modules", "**/*.d.ts"]
}