jquery.mb.ytplayer
Version:
This plugin let you play any public YouTube video as background of your page. It can also be used as a customized player in page.
119 lines (96 loc) • 3.84 kB
HTML
<!--::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jquery.mb.components
file: demo.html
last modified: 10/25/18 8:00 PM
Version: {{ version }}
Build: {{ buildnum }}
Open Lab s.r.l., Florence - Italy
email: matteo@open-lab.com
blog: http://pupunzi.open-lab.com
site: http://pupunzi.com
http://open-lab.com
Licences: MIT, GPL
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
Copyright (c) 2001-2018. Matteo Bicocchi (Pupunzi)
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::-->
<html>
<head>
<meta charset="UTF-8">
<title>youtube Chromeless Player - mb.YTPlayer</title>
<link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
<link href="../../dist/css/jquery.mb.ytplayer.min.css" media="all" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="../../dist/jquery.mb.YTPlayer.min.js"></script>
<style>
body{
border:none;
margin:0;
padding:30px;
background: #444;
font:normal 16px/20px Lekton, sans-serif;
}
#contentPlaceholder{
position: relative;
height: 300px;
}
.player{
display:block;
position:relative;
width:100%;
height:100%;
}
</style>
<script>
jQuery(function(){
if (self.location.href == top.location.href){
var logo=$("<a href='https://pupunzi.com/#mb.components/components.html' style='position:absolute;top:0;z-index:1000'><img id='logo' border='0' src='https://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>");
$("#wrapper").prepend(logo);
$("#logo").fadeIn();
}
});
function loadVideo(){
var request = $.ajax({
url : "ajaxVideo.html",
type : "GET",
data : {},
cache : false,
dataType: "html"
});
request.done(function (resp) {
ytp.isInit = false;
$("#contentPlaceholder").html(resp);
});
request.fail(function (jqXHR, textStatus) {
$("#contentPlaceholder").html("error: "+textStatus);
});
}
function loadText(){
var request = $.ajax({
url : "ajaxText.html",
type : "GET",
data : {},
cache : false,
dataType: "html"
});
request.done(function (resp) {
$("#contentPlaceholder").html(resp);
});
request.fail(function (jqXHR, textStatus) {
$("#contentPlaceholder").html("error: "+textStatus);
});
}
</script>
</head>
<body>
<div id="wrapper" style="position:relative; padding:100px 20px;z-index:10">
<h1 style="color:white"> jQuery.mb.YTPlayer </h1>
<h2 style="color:white"> using the HTML5 iFrame Youtube API </h2>
</div>
<button onclick="loadVideo()">load video</button>
<button onclick="loadText()">load text</button>
<div id="contentPlaceholder"></div>
<a style="position: fixed;top:20px;right: 20px;" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=V6ZS8JPMZC446&lc=GB&item_name=mb%2eideas&item_number=MBIDEAS&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donateCC_LG_global%2egif%3aNonHosted"><img border="0" alt="PayPal" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG_global.gif" class="alignright"></a>
</body>
</html>