Skip to content

Instantly share code, notes, and snippets.

@poonkave

poonkave/jqm_popup_vimeo_video

Created November 30, 2012 09:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save poonkave/4174885 to your computer and use it in GitHub Desktop.
Save poonkave/4174885 to your computer and use it in GitHub Desktop.
Download ZIP
jQueryMobile popup Vimeo Video
Raw
jqm_popup_vimeo_video
<!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 src="http://a.vimeocdn.com/js/froogaloop2.min.js?1b636-1354269188"></script>
<script>
$(document).on("pageinit", function () {
$("#popupVideo iframe")
.attr("width", 0)
.attr("height", 0);
$("#popupVideo").on({
popupbeforeposition: function () {
var size = scale(497, 298, 15, 1),
w = size.width,
h = size.height;
$("#popupVideo iframe")
.attr("width", w)
.attr("height", h);
},
popupafterclose: function () {
$("#popupVideo iframe")
.attr("width", 0)
.attr("height", 0);
Froogaloop($('#player_1')[0]).api('pause');
}
});
});
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">
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?api=1&amp;player_id=player_1" width="540" height="304" frameborder="0" webkitallowfullscreen=""></iframe>
</div>
</div>
</div>
</body>
</html>
​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment