Skip to content

Instantly share code, notes, and snippets.

@jhorsman
Last active December 23, 2015 19:19
Show Gist options
  • Save jhorsman/6681918 to your computer and use it in GitHub Desktop.
Save jhorsman/6681918 to your computer and use it in GitHub Desktop.
Resize a SDL Media Manager player. http://jsfiddle.net/Jhorsman/4RN9C/
/*
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