Auto update video width to match responsive layout

This fixes Issue #40
I also fixed the YouTube loader to remove the frameborder
This commit is contained in:
calzoneman 2013-04-19 14:00:10 -05:00
parent f7ed2adb73
commit eede0b9135
2 changed files with 19 additions and 14 deletions

View file

@ -25,7 +25,7 @@ var FOCUSED = true;
var SCROLLCHAT = true;
var PAGETITLE = "Sync";
var TITLE_BLINK;
var VWIDTH = "670";
var VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", "");//670
var VHEIGHT = "377";
var IGNORED = [];
var KICKED = false;
@ -56,6 +56,11 @@ $(window).focus(function() {
FOCUSED = false;
});
$(window).resize(function() {
VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", "");
$("#ytapiplayer").attr("width", VWIDTH);
});
var params = {};
if(window.location.search) {
var parameters = window.location.search.substring(1).split("&");
@ -424,9 +429,9 @@ $("#stlayout").click(synchtubeLayout);
function largeLayout() {
$("#videodiv").removeClass().addClass("span8 offset2");
VWIDTH = "770";
VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", "");//770
VHEIGHT = "430";
$("#ytapiplayer").attr("width", "770").attr("height", "430");
$("#ytapiplayer").attr("width", VWIDTH).attr("height", "430");
var chat = $("#chatdiv").detach();
$("#layoutrow").remove();
var r = $("<div />").addClass("row").insertAfter($("#videodiv").parent());
@ -437,10 +442,10 @@ function largeLayout() {
}
function hugeLayout() {
VWIDTH = "1170";
VHEIGHT = "658";
$("#videodiv").removeClass().addClass("span12");
$("#ytapiplayer").attr("width", "1170").attr("height", "658");
VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", "");//1170
VHEIGHT = "658";
$("#ytapiplayer").attr("width", VWIDTH).attr("height", "658");
var chat = $("#chatdiv").detach();
$("#layoutrow").remove();
var r = $("<div />").addClass("row").insertAfter($("#videodiv").parent());
@ -452,10 +457,10 @@ function hugeLayout() {
}
function narrowLayout() {
VWIDTH = "570";
VWIDTH = $("#ytapiplayer").parent().css("width").replace("px", "");//570
VHEIGHT = "321";
$("#videodiv").removeClass().addClass("span6");
$("#ytapiplayer").attr("width", "570").attr("height", "321");
$("#ytapiplayer").attr("width", VWIDTH).attr("height", "321");
var chat = $("#chatdiv").detach();
$("#layoutrow").remove();
var r = $("<div />").addClass("row").insertAfter($("#videodiv").parent());

View file

@ -50,6 +50,7 @@ Media.prototype.initYouTube = function() {
}
}
});
$("#ytapiplayer").css("border", "none");
this.load = function(data) {
if(this.player.loadVideoById) {
@ -76,7 +77,6 @@ Media.prototype.initYouTube = function() {
}
Media.prototype.initVimeo = function() {
var iframe = $("<iframe/>").insertBefore($("#ytapiplayer"));
$("#ytapiplayer").remove();
iframe.attr("id", "ytapiplayer");
@ -87,7 +87,7 @@ Media.prototype.initVimeo = function() {
iframe.attr("mozallowfullscreen", "");
iframe.attr("allowFullScreen", "");
iframe.css("border", "none");
this.player = $f(iframe[0]);
$f(iframe[0]).addEvent("ready", function() {
this.player = $f(iframe[0]);
@ -214,7 +214,7 @@ Media.prototype.initLivestream = function() {
}
this.pause = function() { }
this.play = function() { }
this.getTime = function() { }
@ -241,7 +241,7 @@ Media.prototype.initTwitch = function() {
}
this.pause = function() { }
this.play = function() { }
this.getTime = function() { }
@ -251,7 +251,7 @@ Media.prototype.initTwitch = function() {
Media.prototype.initRTMP = function() {
this.removeOld();
var url = "http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf";
var url = "http://fpdownload.adobe.com/strobe/FlashMediaPlayback_101.swf";
var src = encodeURIComponent(this.id);
var params = {
allowFullScreen:"true",
@ -269,7 +269,7 @@ Media.prototype.initRTMP = function() {
}
this.pause = function() { }
this.play = function() { }
this.getTime = function() { }