jquery.mb.YTPlayer/demo_random.html at master · Backenkoehler/jquery.mb.YTPlayer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<!--
  ~ /*******************************************************************************
  ~  jquery.mb.components
  ~  file: demo_random.html
  ~
  ~  Copyright (c) 2001-2014. Matteo Bicocchi (Pupunzi);
  ~  Open lab srl, Firenze - Italy
  ~  email: matteo@open-lab.com
  ~  site: 	http://pupunzi.com
  ~  blog:	http://pupunzi.open-lab.com
  ~ 	http://open-lab.com
  ~
  ~  Licences: MIT, GPL
  ~  http://www.opensource.org/licenses/mit-license.php
  ~  http://www.gnu.org/licenses/gpl.html
  ~
  ~  last modified: 07/01/14 22.50
  ~  ******************************************************************************/
  -->

<html>
<head>
    <meta charset="UTF-8">
    <title>youtube Chromeless Player - mb.YTPlayer</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
	<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>
	<link href="css/YTPlayer.css" media="all" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Lekton' rel='stylesheet' type='text/css'>
    <style>
        body{
            border:none;
            margin:0;
            padding:30px;
            background: #444;
            font:normal 16px/20px Lekton, sans-serif;
        }

    </style>
	<script>


		jQuery(function(){

            if (self.location.href == top.location.href){
                var logo=$("<a href='http://pupunzi.com/#mb.components/components.html' style='position:absolute;top:40px;left:10%;z-index:1000'><img id='logo' border='0' src='http://pupunzi.com/images/logo.png' alt='mb.ideas.repository'></a>");
                $("body").prepend(logo);
                $("#logo").fadeIn();
            }


            jQuery(".player").mb_YTPlayer();
		});

	</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">
        Random video from a list.
    <br>
        Each time you reload the page a video is randomly selected.
    </h2>
</div>
<script>
    var videos = ["VuaJAgx0x_4", "3ovA7zeviRo","u9k1FaMIYTs","bkCg84XgBUg","UJQmV8aPNao"];
    var rndVideo = videos[Math.floor(Math.random()* videos.length)];
</script>
<a class="player" data-property="{videoURL:rndVideo,containment:'body',autoPlay:true, mute:true, startAt:0,opacity:1,ratio:'4/3', addRaster:true}">My video</a>

<a style="position: fixed;top:20px;right: 20px;" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=V6ZS8JPMZC446&amp;lc=GB&amp;item_name=mb%2eideas&amp;item_number=MBIDEAS&amp;currency_code=EUR&amp;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>