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.
323 lines (274 loc) • 9.38 kB
HTML
<!--::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jquery.mb.components
file: demo_ext_methods.html
last modified: 10/29/18 7:53 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">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Youtube Chromeless Player - mb.YTPlayer</title>
<link href='//fonts.googleapis.com/css?family=Lekton|Lobster' rel='stylesheet' type='text/css'>
<link href="../dist/css/jquery.mb.YTPlayer.min.css" media="all" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="../dist/jquery.mb.YTPlayer.js"></script>
<script src="assets/apikey.js"></script>
<style>
*:focus {
outline: none;
}
body {
border: none;
margin: 0;
padding: 30px;
background: #003e50;
font: normal 16px/20px Lekton, sans-serif;
}
a {
color: white;
text-decoration: none;
}
h1 {
text-align: center;
font-size: 50px;
font-family: 'Lobster', cursive;
}
h2 {
font-family: "Open Sans", sans-serif;
font-size: 35px;
text-align: left;
line-height: 60px;
}
h1,
h2 {
font-family: 'Lobster', cursive;
text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.30);
color: #000000;
font-weight: 200;
}
#wrapper {
position: relative;
min-width: 700px;
}
.console {
margin-top: 20px;
text-align: left;
}
button,
.button {
transition: all .4s;
display: inline-block;
padding: 0px 10px;
font-size: 14px;
/*text-transform: uppercase;*/
cursor: pointer;
background-color: rgba(0, 0, 0, 0.40);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
color: #fff;
border: 1px solid transparent;
text-decoration: none;
line-height: 30px;
margin: 3px;
border-radius: 10px;
}
button:hover,
.button:hover {
background-color: rgb(0, 0, 0);
color: #FFF;
border: 1px solid #fff;
}
#info {
position: absolute;
top: 0;
right: 0;
max-width: 300px;
color: #212121;
background-color: rgba(255, 255, 255, 0.60);
font-size: 150%;
padding: 10px;
display: none;
}
#wp {
position: fixed;
z-index: 10;
min-width: 300px;
background: rgba(0, 0, 0, 0.55);
/*background: #ffb200;*/
color: #fff;
font-size: 24px;
line-height: 24px;
padding: 20px;
bottom: 30px;
right: 230px;
cursor: pointer;
text-align: left;
border-radius: 10px;
font-family: 'Lobster', cursive;
}
#wp:hover {
background: #000000;
}
#wp img {
width: 60px;
margin-right: 20px;
}
@media only screen and (max-device-width: 480px) {
h1 {
margin-top: 80px;
text-align: left;
font-size: 40px;
font-family: 'Lobster', cursive;
}
h2 {
font-size: 25px;
text-align: left ;
line-height: 1.2;
}
#wrapper {
position: relative;
min-width: 100%;
}
#info {
position: fixed;
top: 0;
right: 0;
max-width: 300px;
color: #212121;
background-color: rgba(255, 255, 255, 1);
z-index: 10000;
font-size: 100%;
padding: 10px;
display: none;
}
#donate {
display: none;
}
#wp {
position: relative;
top: auto;
left: auto;
}
}
</style>
<script>
var myPlayer;
function showInfo(info) {
$("#info").stop().delay(500).html(info).stop().fadeIn().delay(5000).fadeOut();
}
jQuery(function () {
myPlayer = jQuery("#bgndVideo").YTPlayer();
myPlayer.on("YTPData", function (e) {
showInfo(e.prop.title + "<br><br>@" + e.prop.channelTitle);
});
});
</script>
</head>
<body>
<div id="wrapper" style="position:relative; padding:10px 0;z-index:10">
<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>
<h1 style="color:white">jQuery.mb.YTPlayer</h1>
<h2 style="color:white">
An HTML5 Background player
<br>for YouTube videos</h2>
<div class="console">
<h2 style="color:white">Available controls methods</h2>
<button onclick="myPlayer.YTPPause()">YTPPause</button>
<button onclick="myPlayer.YTPPlay()">YTPPlay</button>
<button onclick="myPlayer.YTPTogglePlay()">YTPTogglePlay</button>
<button onclick="myPlayer.YTPSeekTo(50)">YTPSeekTo(50)</button>
<br>
<br>
<button onclick="myPlayer.YTPMute()">YTPMute</button>
<button onclick="myPlayer.YTPUnmute()">YTPUnmute</button>
<button onclick="myPlayer.YTPToggleVolume()">YTPToggleVolume</button>
<button onclick="myPlayer.YTPSetVolume(80)">YTPSetVolume(80)</button>
<button onclick="showInfo(myPlayer.YTPGetVolume())">YTPGetVolume()</button>
<br>
<br>
<button onclick="showInfo(myPlayer.YTPGetVideoID())">YTPGetVideoID</button>
<button onclick="showInfo(myPlayer.YTPGetTime())">YTPGetTime</button>
<button onclick="showInfo(myPlayer.YTPGetTotalTime())">YTPGetTotalTime</button>
<br>
<br>
<button onclick="showInfo(myPlayer.YTPGetAnchor())">YTPGetAnchor</button>
<button onclick="myPlayer.YTPSetAnchor('left,top')">YTPSetAnchor('top/left')</button>
<button onclick="myPlayer.YTPSetAnchor('center,center')">YTPSetAnchor('center/center')</button>
<button onclick="myPlayer.YTPSetAnchor('right,bottom')">YTPSetAnchor('right/bottom')</button>
<br>
<br>
<button onclick="myPlayer.YTPToggleFilter('grayscale', 100)">YTPToggleFilter('grayscale',100)</button>
<button onclick="myPlayer.YTPToggleFilter('sepia', 100)">YTPToggleFilter('sepia',100)</button>
<a href="demo.html">(Play with filters)</a>
<br>
<br>
<button onclick="myPlayer.YTPSetVideoQuality('hd720')">YTPSetVideoQuality('hd720')</button>
<button onclick="showInfo(myPlayer.YTPGetVideoQuality())">YTPGetVideoQuality()</button>
<br>
<br>
<button onclick="myPlayer.YTPAddMask('assets/mask-4.png')">YTPAddMask</button>
<button onclick="myPlayer.YTPRemoveMask()">YTPRemoveMask</button>
<!--<button onclick="myPlayer.YTPToggleMask()">YTPToggleMask</button>-->
<br>
<br>
<button onclick="myPlayer.YTPFullscreen()">YTPFullscreen</button>
<button onclick="console.debug(myPlayer.YTPGetPlayer())">YTPGetPlayer</button>
<button onclick="myPlayer.YTPPlayerDestroy()">YTPPlayerDestroy</button>
<br>
<br>
<button onclick="showInfo(myPlayer.YTPGetPlaybackRate())">YTPGetPlaybackRate</button>
<button onclick="myPlayer.YTPSetPlaybackRate(0.25)">YTPSetPlaybackRate to 0.25</button>
<button onclick="myPlayer.YTPSetPlaybackRate(1)">YTPSetPlaybackRate to 1</button>
<button onclick="myPlayer.YTPSetPlaybackRate(2)">YTPSetPlaybackRate to 2</button>
<br>
<br>
<button>YTPSetAbundance <input type="range" id="abundanceVal" min="0" max="100" oninput="myPlayer.YTPSetAbundance(jQuery('#abundanceVal').val()/100, true); jQuery('#abundanceValNumber').html(jQuery('#abundanceVal').val()/100)" /> (<span id="abundanceValNumber"></span>) </button>
<button onclick="showInfo(myPlayer.YTPGetAbundance())">YTPGetAbundance</button>
<br>
<br>
<button><input id="stopMovieOnBlur" checked name="stopMovieOnBlur" type="checkbox" onchange="if($(this).is(':checked')){jQuery('#bgndVideo').YTPSetOption('stopMovieOnBlur', true)} else {jQuery('#bgndVideo').YTPSetOption('stopMovieOnBlur', false)}"> <label for="stopMovieOnBlur" style="color:#fff">stopMovieOnBlur</label></button>
</div>
<div id="info"></div>
<a id="donate" style="position: fixed;bottom:40px;right: 30px;" href="http://pupunzi.open-lab.com/consider-a-donation/" target="_blank">
<img border="0" alt="PayPal" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG_global.gif" class="alignright">
</a>
<a id="bgndVideo" class="player"
data-property="{
videoURL:'r1xohS2u69E',
containment:'body',
showControls:true,
autoPlay:true,
loop:true,
vol:50,
mute:true,
startAt:40,
stopAt:150,
opacity:1,
addRaster:true,
quality:'small',
abundance:.25,
coverImage:'assets/bg-1.jpg'
}"
>My video</a>
</div>
<div id="wp" onclick="self.location.href='https://pupunzi.com/wpPlus/go-plus.php?plugin_prefix=YTPL'">
<img src="https://pupunzi.com/wpPlus/images/YTPL.svg" style="float: left">
<span>Get the
<br>
<b>Wordpress</b> Plug-in!</span>
</div>
</body>
</html>