namendes/still_resize.css

## still_resize.css
.mmPlayer {
	position: relative;
	display:block;
	 height:350px;
	margin:10px;
}

.overlay
{
    display:none;
}

.still {
	position: absolute;
}

.playerContainer  {
	position: absolute;
	opacity: 0;
}


## still_resize.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<title>MediaManager Services - HT test</title>


	<link type="text/css" rel="stylesheet" href="styles/still_resize.css" media="screen">

	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="script/still_resize.js"></script>i

	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="script/jquery.fancybox.js?v=2.1.5"></script>


	<link href="Content/jquery.fancybox.css" rel="stylesheet" media="screen" />
</head>
<body>


	<!--<a id="fancybox-manual-a" href="javascript:;">Open single item</a>-->
	<a id="fancybox-manual-a" href="#overlay1">Load Video in shadow box</a>

	<div class="overlay" id="overlay1" data-mmdistributionurl="https://mmdemo.dist.sdlmedia.com/vms/distribution/?o=46B1935E-C3F9-4C8D-A34F-361A9B4667E3">
		 </div>

	<div class="mmPlayer"  data-mmdistributionurl="https://mmdemo.dist.sdlmedia.com/vms/distribution/?o=46B1935E-C3F9-4C8D-A34F-361A9B4667E3">
		 </div>

	<div class="mmPlayer" data-mmdistributionurl="http://sdl-training.dist.sdlmedia.com/vms/distribution/embed/?o=2981B015-A171-4C6A-BEC6-9C0BC80B9F4E">

	</div>

	<script type="text/javascript">

		$(document).ready(function ($)
		{

		    $("#fancybox-manual-a").click(function () {
		        var overPlayer = $('#overlay1');
		        overPlayer.empty();
		        $.fancybox.open(overPlayer);
		        loadPlayer(overPlayer, 'overlay1');
			});

			$(".mmPlayer").each(function (index, value)
			{
				loadPlayer($(value),index);
			});
		});
			</script>

</body>
</html>

## still_resize.js
function loadPlayer(playerElement, suffix)
{
    distributionUrl =  playerElement.attr("data-mmDistributionUrl");
    if (!distributionUrl) {
        return;
    }
    var size = { height: '480px', width: '640px' };

    loadStill(playerElement, distributionUrl, size);
    loadPlayerContainer(playerElement, distributionUrl, size, suffix);
  //  alert(playerElement.attr('class'));
}


function loadStill(playerElement, distributionUrl,size) {
    stillUrl = distributionUrl.replace("distribution/?o=", "distribution/?f=").concat("&ext=.jpg");

    playerElement.css('height', size.height);
    playerElement.css('width', size.width);

    var still = jQuery('<div>', { class: 'still' });
    var backgroundImage = jQuery('<img>', { src: stillUrl });

    if (size.height) {
        backgroundImage.css('height', size.height);
    }
    if (size.width) {
        backgroundImage.css('width', size.width);
    }

    still.append(backgroundImage).appendTo(playerElement);
}

function loadPlayerContainer(playerElement, distributionUrl, size, index) {

    playerElement.bind("player-ready", size, event_playerready);

    playerId = "MediaManagerAjaxPlayer_" + index;
    ajaxLoaderUrl = distributionUrl.replace("distribution/?o=", "distribution/embed/?o=").concat("&trgt=" + playerId);

    var player = jQuery('<div>', { id: playerId, class: 'playerContainer' });
    player.appendTo(playerElement);

    $.getScript(ajaxLoaderUrl);
}

function showPlayer(playerContainerSelector, size) {

    var f1 = playerContainerSelector.children('[id^=sdlmm_placeholder_sdlmm_MediaManagerAjaxPlayer]');
    var f2 = f1.children('[id^=pd_sdlmm_MediaManagerAjaxPlayer]');

    //var f1 = playerContainerSelector.children();
    //var f2 = f1.children();

    if (!playerContainerSelector.attr('resized')) {

        playerContainerSelector.attr('resized', true);

        if (size.height) {
            playerContainerSelector.css('height', size.height);
            f1.css('height', size.height);
            f2.css('height', size.height);

        }
        if (size.width) {
            playerContainerSelector.css('width', size.width);
            f1.css('width', size.width);
            f2.css('width', size.width);
        }
    }

    $(playerContainerSelector).fadeTo("slow", 1);
}

function event_playerready(event) {
    var playerContainer = $(event.target).parent();
    showPlayer(playerContainer, event.data);
}
	.mmPlayer {
	position: relative;
	display:block;
	height:350px;
	margin:10px;
	}

	.overlay
	{
	display:none;
	}

	.still {
	position: absolute;
	}

	.playerContainer {
	position: absolute;
	opacity: 0;
	}
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>

	<title>MediaManager Services - HT test</title>


	<link type="text/css" rel="stylesheet" href="styles/still_resize.css" media="screen">

	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="script/still_resize.js"></script>i

	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="script/jquery.fancybox.js?v=2.1.5"></script>


	<link href="Content/jquery.fancybox.css" rel="stylesheet" media="screen" />
	</head>
	<body>


	<!--<a id="fancybox-manual-a" href="javascript:;">Open single item</a>-->
	<a id="fancybox-manual-a" href="#overlay1">Load Video in shadow box</a>

	<div class="overlay" id="overlay1" data-mmdistributionurl="https://mmdemo.dist.sdlmedia.com/vms/distribution/?o=46B1935E-C3F9-4C8D-A34F-361A9B4667E3">
	</div>

	<div class="mmPlayer" data-mmdistributionurl="https://mmdemo.dist.sdlmedia.com/vms/distribution/?o=46B1935E-C3F9-4C8D-A34F-361A9B4667E3">
	</div>

	<div class="mmPlayer" data-mmdistributionurl="http://sdl-training.dist.sdlmedia.com/vms/distribution/embed/?o=2981B015-A171-4C6A-BEC6-9C0BC80B9F4E">

	</div>

	<script type="text/javascript">

	$(document).ready(function ($)
	{

	$("#fancybox-manual-a").click(function () {
	var overPlayer = $('#overlay1');
	overPlayer.empty();
	$.fancybox.open(overPlayer);
	loadPlayer(overPlayer, 'overlay1');
	});

	$(".mmPlayer").each(function (index, value)
	{
	loadPlayer($(value),index);
	});
	});
	</script>

	</body>
	</html>
	function loadPlayer(playerElement, suffix)
	{
	distributionUrl = playerElement.attr("data-mmDistributionUrl");
	if (!distributionUrl) {
	return;
	}
	var size = { height: '480px', width: '640px' };

	loadStill(playerElement, distributionUrl, size);
	loadPlayerContainer(playerElement, distributionUrl, size, suffix);
	// alert(playerElement.attr('class'));
	}


	function loadStill(playerElement, distributionUrl,size) {
	stillUrl = distributionUrl.replace("distribution/?o=", "distribution/?f=").concat("&ext=.jpg");

	playerElement.css('height', size.height);
	playerElement.css('width', size.width);

	var still = jQuery('<div>', { class: 'still' });
	var backgroundImage = jQuery('<img>', { src: stillUrl });

	if (size.height) {
	backgroundImage.css('height', size.height);
	}
	if (size.width) {
	backgroundImage.css('width', size.width);
	}

	still.append(backgroundImage).appendTo(playerElement);
	}

	function loadPlayerContainer(playerElement, distributionUrl, size, index) {

	playerElement.bind("player-ready", size, event_playerready);

	playerId = "MediaManagerAjaxPlayer_" + index;
	ajaxLoaderUrl = distributionUrl.replace("distribution/?o=", "distribution/embed/?o=").concat("&trgt=" + playerId);

	var player = jQuery('<div>', { id: playerId, class: 'playerContainer' });
	player.appendTo(playerElement);

	$.getScript(ajaxLoaderUrl);
	}

	function showPlayer(playerContainerSelector, size) {

	var f1 = playerContainerSelector.children('[id^=sdlmm_placeholder_sdlmm_MediaManagerAjaxPlayer]');
	var f2 = f1.children('[id^=pd_sdlmm_MediaManagerAjaxPlayer]');

	//var f1 = playerContainerSelector.children();
	//var f2 = f1.children();

	if (!playerContainerSelector.attr('resized')) {

	playerContainerSelector.attr('resized', true);

	if (size.height) {
	playerContainerSelector.css('height', size.height);
	f1.css('height', size.height);
	f2.css('height', size.height);

	}
	if (size.width) {
	playerContainerSelector.css('width', size.width);
	f1.css('width', size.width);
	f2.css('width', size.width);
	}
	}

	$(playerContainerSelector).fadeTo("slow", 1);
	}

	function event_playerready(event) {
	var playerContainer = $(event.target).parent();
	showPlayer(playerContainer, event.data);
	}