Last active
December 23, 2015 19:19
-
-
Save jhorsman/6681918 to your computer and use it in GitHub Desktop.
Resize a SDL Media Manager player. http://jsfiddle.net/Jhorsman/4RN9C/
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
/* | |
Resize a SDL Media Manager player. | |
By: Jan Horsman ([email protected]) | |
The function setPlayerResizeEvent() performs the resize. | |
This solution is depending on JQuery which is loaded by the Media Manager | |
player anyway. | |
See the demo on http://jsfiddle.net/Jhorsman/4RN9C/ | |
This helper can be used whenever you want to resize a SDL Media Manager | |
player in the brower, whithout having to change the dimensions in the | |
Media Manager outlet (settings of the player in SDL Media Manager). | |
In a responsive design a the window.resize could help to resize the player | |
dynamically. | |
$(window).resize(function() { | |
//calculate playerWidth and playerHeight based on responsive design logic | |
resizeMediaManagerPlayer(playerContainerSelector, playerWidth, playerHeight); | |
return false; | |
}); | |
*/ | |
function setPlayerResizeEvent(playerContainerSelector, playerWidth, playerHeight, debug) { | |
if (playerContainerSelector == "") { | |
if(debug == true) | |
console.debug("setPlayerResizeEvent: Invalid argument, playerContainerSelector is not set"); | |
return; | |
} | |
if (playerWidth == "" || playerHeight == "") { | |
if(debug == true) | |
console.debug("resizeMediaManagerPlayer: Invalid arguments, playerWidth and playerHeight are required; container name: " + playerContainerSelector + "; player width: " + playerWidth + "; player height: " + playerHeight); | |
return; | |
} | |
setContainerDimensions(playerContainerSelector, playerWidth, playerHeight, debug); | |
$j(playerContainerSelector).bind("player-ready", function() { | |
resizeMediaManagerPlayer(playerContainerSelector, playerWidth, playerHeight); | |
showContainter(playerContainerSelector, debug); | |
}); | |
} | |
function setContainerDimensions(playerContainerSelector, playerWidth, playerHeight, debug) { | |
if(debug == true) | |
console.debug("setContainerDimensions; container name: " + playerContainerSelector + "; player width: " + playerWidth + "; player height: " + playerHeight); | |
$j(playerContainerSelector).css({'opacity': 0, 'width': playerWidth, 'height': playerHeight}); | |
} | |
function showContainter(playerContainerSelector, debug) { | |
if(debug == true) | |
console.debug("showContainter; container name: " + playerContainerSelector); | |
$j(playerContainerSelector).fadeTo("fast", 1); | |
} | |
function resizeMediaManagerPlayer(playerContainerSelector, playerWidth, playerHeight) { | |
var mediaManagerPlaceholder = $j(playerContainerSelector).children().last() | |
var projekktorPlayer = mediaManagerPlaceholder.children().first() | |
//Rezise the player div, the media manager placeholder and the projekktor player | |
$j(playerContainerSelector).css({ 'width': playerWidth, 'height': playerHeight }); | |
mediaManagerPlaceholder.css({ 'width': playerWidth, 'height': playerHeight }); | |
projekktorPlayer.css({ 'width': playerWidth, 'height': playerHeight }); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment