Created
September 21, 2014 22:12
-
-
Save chrillo/6ca4a872675d465b4013 to your computer and use it in GitHub Desktop.
Vimeo Fullscreen Player
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // This is here so we cann talk to the Vimeo Player Api, | |
| // taken from here https://github.com/vimeo/player-api/tree/master/javascript | |
| var Froogaloop=function(){function e(a){return new e.fn.init(a)}function h(a,c,b){if(!b.contentWindow.postMessage)return!1;var f=b.getAttribute("src").split("?")[0],a=JSON.stringify({method:a,value:c});"//"===f.substr(0,2)&&(f=window.location.protocol+f);b.contentWindow.postMessage(a,f)}function j(a){var c,b;try{c=JSON.parse(a.data),b=c.event||c.method}catch(f){}"ready"==b&&!i&&(i=!0);if(a.origin!=k)return!1;var a=c.value,e=c.data,g=""===g?null:c.player_id;c=g?d[g][b]:d[b];b=[];if(!c)return!1;void 0!== | |
| a&&b.push(a);e&&b.push(e);g&&b.push(g);return 0<b.length?c.apply(null,b):c.call()}function l(a,c,b){b?(d[b]||(d[b]={}),d[b][a]=c):d[a]=c}var d={},i=!1,k="";e.fn=e.prototype={element:null,init:function(a){"string"===typeof a&&(a=document.getElementById(a));this.element=a;a=this.element.getAttribute("src");"//"===a.substr(0,2)&&(a=window.location.protocol+a);for(var a=a.split("/"),c="",b=0,f=a.length;b<f;b++){if(3>b)c+=a[b];else break;2>b&&(c+="/")}k=c;return this},api:function(a,c){if(!this.element|| | |
| !a)return!1;var b=this.element,f=""!==b.id?b.id:null,d=!c||!c.constructor||!c.call||!c.apply?c:null,e=c&&c.constructor&&c.call&&c.apply?c:null;e&&l(a,e,f);h(a,d,b);return this},addEvent:function(a,c){if(!this.element)return!1;var b=this.element,d=""!==b.id?b.id:null;l(a,c,d);"ready"!=a?h("addEventListener",a,b):"ready"==a&&i&&c.call(null,d);return this},removeEvent:function(a){if(!this.element)return!1;var c=this.element,b;a:{if((b=""!==c.id?c.id:null)&&d[b]){if(!d[b][a]){b=!1;break a}d[b][a]=null}else{if(!d[a]){b= | |
| !1;break a}d[a]=null}b=!0}"ready"!=a&&b&&h("removeEventListener",a,c)}};e.fn.init.prototype=e.fn;window.addEventListener?window.addEventListener("message",j,!1):window.attachEvent("onmessage",j);return window.Froogaloop=window.$f=e}(); | |
| var VimeoPlayer = function(options,callback){ | |
| if(!options.url) throw new Error("video player needs a video url") | |
| this.ratio = options.ratio || 16/9 | |
| this.options= options | |
| this.autoplay = options.autoplay!==undefined ? options.autoplay : true | |
| this.url = options.url | |
| this.callback = callback | |
| $(window).on('resize',this.onResize.bind(this)) | |
| } | |
| VimeoPlayer.prototype.render = function(target){ | |
| //player.vimeo.com/video/105963441 | |
| this.target = target || window | |
| this.$el= $('<iframe id="vimeoplayer" src="'+this.url+'?api=1&player_id=vimeoplayer" width="100%" height="100%" frameborder="0"></iframe>"') | |
| this.el = this.$el.get(0) | |
| this.player = $f(this.el); | |
| this.player.addEvent('ready', function() { | |
| if(this.autoplay) this.player.api('play'); | |
| if(this.callback) this.callback(this.player) | |
| }.bind(this)); | |
| this.onResize() | |
| return this | |
| } | |
| VimeoPlayer.prototype.onResize = function(){ | |
| if(!this.el) return | |
| var width = $(this.target).width() | |
| var height = $(this.target).height() | |
| var w,h,offsetLeft,offsetTop | |
| if(width/height < this.ratio){ | |
| w = height*this.ratio | |
| h = height | |
| offsetLeft = (w-width)/2*-1 | |
| offsetTop = 0 | |
| }else{ | |
| w = width | |
| h = width/this.ratio | |
| offsetLeft =0 | |
| offsetTop =(h-height)/2*-1 | |
| } | |
| this.$el.css({ | |
| position:"absolute", | |
| width:w+"px", | |
| height:h+"px", | |
| top:offsetTop+"px", | |
| left:offsetLeft+"px" | |
| }) | |
| } | |
| VimeoPlayer.prototype.close = function(){ | |
| $(window).on('resize',this.onResize.bind(this)) | |
| } | |
| module.exports = VimeoPlayer |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment