Skip to content

Instantly share code, notes, and snippets.

@poonkave

poonkave/jqm_popup_vimeo_video2

Created November 30, 2012 11:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save poonkave/4175138 to your computer and use it in GitHub Desktop.
Save poonkave/4175138 to your computer and use it in GitHub Desktop.
Download ZIP
jQueryMobile popup Vimeo Video -1
Raw
jqm_popup_vimeo_video2
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
$(document).on("pageinit", function () {
$("#popupVideo").on({
popupbeforeposition: function () {
var size = scale(497, 298, 15, 1),
w = size.width,
h = size.height,
markup = " <iframe src='http://player.vimeo.com/video/41135183' width='" + w + "' height='" + h + "' seamless></iframe>";
$("#popupVideo").html(markup);
},
popupafterclose: function () {
$("#popupVideo").html("<span></span>");
}
});
});
function scale(width, height, padding, border) {
var scrWidth = $(window).width() - 30,
scrHeight = $(window).height() - 30,
ifrPadding = 2 * padding,
ifrBorder = 2 * border,
ifrWidth = width + ifrPadding + ifrBorder,
ifrHeight = height + ifrPadding + ifrBorder,
h, w;
if (ifrWidth < scrWidth && ifrHeight < scrHeight) {
w = ifrWidth;
h = ifrHeight;
} else if ((ifrWidth / scrWidth) > (ifrHeight / scrHeight)) {
w = scrWidth;
h = (scrWidth / ifrWidth) * ifrHeight;
} else {
h = scrHeight;
w = (scrHeight / ifrHeight) * ifrWidth;
}
return {
'width': w - (ifrPadding + ifrBorder),
'height': h - (ifrPadding + ifrBorder)
};
};
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="e">
<div data-role="content">
<a href="#popupVideo" data-rel="popup" data-position-to="window" data-role="button" data-theme="b" data-inline="true">Launch video player</a>
<div data-role="popup" id="popupVideo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
</div>
</div>
</div>
</body>
</html>
​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment