jquery.mb.vimeo_player
Version:
This plugin let you play any public Vimeo video as background of your page. It can also be used as a customized player in page.
164 lines (140 loc) • 4.04 kB
HTML
<!--::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
jquery.mb.components
file: index.tmpl
last modified: 1/16/18 11:17 PM
Version: 1.2.0
Build: 567
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>Vimeo Chromeless Player - mb.vimeo_player</title>
<link href='http://fonts.googleapis.com/css?family=Lekton|Lobster' rel='stylesheet' type='text/css'>
<link href="css/jquery.mb.vimeo_player.min.css?_bn=567" media="all" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="jquery.mb.vimeo_player.js?_bn=567"></script>
<style>
*:focus {
outline: none;
}
body {
border: none;
margin: 0;
padding: 30px;
background: #222c2f;
font: normal 16px/20px Lekton, sans-serif;
}
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;
}
button {
transition: all .4s;
display: inline-block;
padding: 0px 10px;
font-size: 12px;
text-transform: uppercase;
cursor: pointer;
background-color: rgba(248, 248, 248, 0.4);
box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
color: #000;
border: 1px solid transparent;
text-decoration: none;
line-height: 30px;
margin: 3px;
border-radius: 10px;
}
button:hover {
background-color: rgb(0, 0, 0);
color: #FFF;
}
#changeVideo label {
padding: 10px;
display: block;
}
#changeVideo input {
padding: 10px;
display: block;
width: 250px;
border-radius: 10px;
border: none;
font-size: 20px;
color: #fff;
font-weight: 700;
background-color: rgba(168, 168, 168, 0.20);
}
#changeVideo input[type=number] {
display: inline-block;
width: 100px;
}
#changeVideo input[type=checkbox] {
display: inline-block;
width: 20px;
}
</style>
<script>
var isIframe = function() {
var a = !1;
try {
self.location.href != top.location.href && ( a = !0 )
} catch ( b ) {
a = !0
}
return a
};
var myPlayer;
jQuery( function() {
if ( !isIframe() ) {
var logo = $( "<a href='http://pupunzi.com/#mb.components/components.html' style='position:absolute;top:0;z-index:1000'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>" );
$( "#wrapper" ).prepend( logo ), $( "#logo" ).fadeIn()
}
myPlayer = jQuery( "#bgndVideo" ).vimeo_player( {
mobileFallbackImage: "https://i.ytimg.com/vi/YgmIibSnZs0/maxresdefault.jpg"
} );
} );
</script>
</head>
<body>
<div id="wrapper" style="position:relative; padding:10px 0;z-index:10">
<br>
<br>
<br>
<br>
<br>
<br>
<button onclick="myPlayer.v_play()">PLAY</button>
<button onclick="myPlayer.v_pause()">PAUSE</button>
<button onclick="myPlayer.v_toggle_play()">TOGGLE</button>
<button onclick="myPlayer.v_fullscreen()">FULL-SCREEN</button>
<!--https://vimeo.com/7681282, https://vimeo.com/196277011, https://vimeo.com/31976384, https://vimeo.com/35816739, https://vimeo.com/8969176, https://vimeo.com/84867111, https://vimeo.com/31976384-->
<a id="bgndVideo" class="player" data-property="{videoURL:'https://vimeo.com/84867111',containment:'body', showControls:true, autoPlay:true, loop:false, vol:50, mute:true, startAt:10, stopAt:150, opacity:1, addRaster:true, quality:'hd720', optimizeDisplay:true, ratio:2.31}">My video</a>
</div>
</body>
</html>