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.
202 lines (173 loc) • 5.81 kB
HTML
<!--::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jquery.mb.components
file: demo_videoList_autoChange.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='https://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.2.1/jquery.min.js"></script>
<script src="../dist/jquery.mb.YTPlayer.js"></script>
<script src="assets/apikey.js"></script>
<style>
body {
border: none;
margin: 0;
padding: 30px;
background: #003e50;
font: normal 16px/20px Lekton, sans-serif;
}
h1,
h2 {
font-family: 'Lobster', cursive;
font-size: 40px;
text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.30);
font-weight: 200;
}
.player {
display: inline-block;
vertical-align: top;
position: relative;
width: 500px;
height: 350px;
margin-top: 100px ;
left: 0;
overflow: hidden;
border-radius: 4px;
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
#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: 60px;
cursor: pointer;
text-align: left;
border-radius: 10px;
font-family: 'Lobster', cursive;
}
#wp:hover {
background: #000000;
}
#wp img {
width: 60px;
margin-right: 20px;
}
</style>
<script>
var myPlayListPlayer;
jQuery(function () {
/**
* Set the video list with all the parameters for each video
* @type {*[]}
*/
var videos = [
{
videoURL: "RVrLiXfiCik",
containment: 'body',
autoPlay: true,
mute: false,
startAt: 20,
stopAt: 75,
opacity: 1,
loop: false,
ratio: 16/9,
addRaster: true,
quality: "auto"
},
{
videoURL: "UWEjxkkB8Xs",
containment: 'body',
autoPlay: true,
mute: true,
startAt: 1,
stopAt: 50,
opacity: 1,
loop: 2,
ratio: 4/3,
addRaster: false,
quality: "large"
},
{
videoURL: "3nVzewhsmM0",
containment: 'body',
autoPlay: true,
mute: false,
startAt: 75,
// stopAt: 75,
opacity: 1,
loop: 2,
ratio: 4/3,
addRaster: true,
quality: "large"
}
];
myPlayListPlayer = jQuery("#myPlayerID").YTPlaylist(videos, false, function (video) {
/*
if (video.videoData) {
jQuery("#videoID").html(video.videoData.id);
jQuery("#videoTitle").html(video.videoData.title);
}
*/
});
myPlayListPlayer.on("YTPData", function (e) {
jQuery("#videoID").html(e.prop.id);
jQuery("#videoTitle").html(e.prop.title);
});
});
</script>
</head>
<body>
<div id="wrapper" style="position:relative; padding-top: 100px; color:white">
<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> jQuery.mb.YTPlayer </h1>
<h2> This page shows a playlist of 3 videos continuously.</h2>
<p>You can also shuffle the list before playing them.</p>
<p>See the source to understand how you can define the playlist and how to invoke the player.</p>
<div style="background:rgba(0,0,0,0.2); padding: 10px; margin: 10px;max-width: 300px;">
<h2 style="color:white">Video info:</h2>
<p style="color:white"> video ID:
<span id="videoID"></span>
</p>
<p style="color:white"> Title:
<span id="videoTitle"></span>
</p>
</div>
<button style="color:#000000; font-size: 22px; cursor: pointer" onclick="jQuery('#myPlayerID').YTPPlayPrev()">play previous</button>
<button style="color:#000000; font-size: 22px; cursor: pointer" onclick="jQuery('#myPlayerID').YTPPlayNext()">play next</button>
<button style="color:#000000; font-size: 22px; cursor: pointer" onclick="jQuery('#myPlayerID').YTPPlayIndex(2)">play video n° 2</button>
</div>
<div class="player" id="myPlayerID">My video</div>
<a 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>
<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>