html Datei:
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>ClassicHandy</title>
<link rel="stylesheet" type="text/css" href="popup.css" title="popup">
<script language="javascript" type="text/javascript" src="popup.js"></script>
</head>
<body>
<a href="#popupVideo" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Launch video player</a>
<div data-role="popup" id="popupVideo" data-overlay-theme="b" data-theme="a" data-tolerance="15,15" class="ui-content">
<iframe src="
http://player.vimeo.com/video/41135183?portrait=0" width="497" height="298" seamless=""></iframe>
</div>
</body>
</html>
javascript Datei:
// JavaScript Document
// popup examples
$( document ).on( "pagecreate", function() {
// The window width and height are decreased by 30 to take the tolerance of 15 pixels at each side into account
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 )
};
};
$( ".ui-popup iframe" )
.attr( "width", 0 )
.attr( "height", "auto" );
$( "#popupVideo" ).on({
popupbeforeposition: function() {
// call our custom function scale() to get the width and height
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 );
}
});
});
css Datei:
@charset "UTF-8";
/* CSS Document */
/* *************************** ALLGEMEINE FORMATIERUNG *******************************
*************************************************************************************/
iframe {
border: none;
}
Also so hab ich es jetzt stehen, habs 1:1 von dem Link in meiner Frage übernommen, jedoch wird bei mir kein Button (Launch Video Player) dargestellt und das Video wie gesagt nicht erst mit klick auf den Button in einem kleinen Fenster angezeigt. Und ich verstehe nicht wieso es auf deren Seite funktioniert und bei mir nicht.
