Permalink
Browse files

Updating videos, modifying resize event.

  • Loading branch information...
1 parent d07eb40 commit 7a49526ad418589e4699e6e4e9375ea7a04e7476 georgepaterson committed Jun 2, 2011
View
@@ -8,6 +8,7 @@
<style>
body {
margin: 0;
+ font-family: arial, helvetica, sans-serif;
}
a {
color: #FFF;
@@ -31,9 +32,16 @@
}
.ui-video-background {
position: absolute;
- top: 0;
+ top: 30px;
left: 850px;
}
+ .ui-video-background-controls {
+ margin: 0;
+ padding: 0 10px;
+ }
+ .ui-video-background-controls li {
+ float: left;
+ }
#page {
position: relative;
z-index: 1;
@@ -53,10 +61,11 @@
$(document).ready(function() {
$('body').prepend('<div class="video-background"></div>');
$('.video-background').videobackground({
- videoSource: ['video/dizzy.webm',
- 'video/dizzy.ogv',
- 'video/dizzy.m4v'],
+ videoSource: ['video/big-buck-bunny.webm',
+ 'video/big-buck-bunny.ogv',
+ 'video/big-buck-bunny.m4v'],
controlPosition: '#main',
+ poster: 'video/big-buck-bunny.jpg',
preloadHtml: '<p>Loading video</p><ul><li><a href="#">Skip video</a></li></ul>'
});
});
@@ -85,7 +94,7 @@
<li>preloadCallback:</li>
<li>loadedCallback:</li>
</ul>
- <p>Videos from <a href="http://html5demos.com/">http://html5demos.com/</a>.</p>
+ <p>Videos from <a href="http://www.bigbuckbunny.org/">http://www.bigbuckbunny.org/</a>.</p>
</div>
<div id="aside" class="aside" role="complementary">
</div>
@@ -45,7 +45,7 @@
poster: null,
autoplay: true,
preload: 'none',
- loop: true,
+ loop: false,
controlPosition: null,
controlText: ['Play', 'Pause', 'Mute', 'Unmute'],
preloadHtml: '',
@@ -166,7 +166,7 @@
$(self).css('height', windowHeight);
}
else if (documentHeight > windowHeight) {
- $(self).css('height', documentHeight);
+ $(self).css('height', windowHeight);
}
},
/*
@@ -190,22 +190,22 @@
$('.ui-video-background-play a', controls).click(function(event) {
event.preventDefault();
if ($('video', self).get(0).paused) {
- $('video', self).get(0).play();
+ $('video', self).get(0).play();
$(this).toggleClass('ui-icon-pause ui-icon-play');
$(this).text(settings.controlText[1]);
- }
+ }
else {
if ($('video', self).get(0).ended) {
$('video', self).get(0).play();
$(this).toggleClass('ui-icon-pause ui-icon-play');
$(this).text(settings.controlText[1]);
}
else {
- $('video', self).get(0).pause();
- $(this).toggleClass('ui-icon-pause ui-icon-play');
- $(this).text(settings.controlText[0]);
+ $('video', self).get(0).pause();
+ $(this).toggleClass('ui-icon-pause ui-icon-play');
+ $(this).text(settings.controlText[0]);
}
- }
+ }
});
/*
*
@@ -214,17 +214,17 @@
$('.ui-video-background-mute a', controls).click(function(event) {
event.preventDefault();
if ($('video', self).attr('muted')) {
- $('video', self).attr('muted', false);
+ $('video', self).attr('muted', false);
$('video', self).get(0).volume = 1;
$(this).toggleClass('ui-icon-volume-on ui-icon-volume-off');
$(this).text(settings.controlText[2]);
- }
+ }
else {
- $('video', self).attr('muted', true);
+ $('video', self).attr('muted', true);
$('video', self).get(0).volume = 0;
$(this).toggleClass('ui-icon-volume-on ui-icon-volume-off');
$(this).text(settings.controlText[3]);
- }
+ }
});
/*
* Firefox doesn't currently use the loop attribute.
@@ -236,7 +236,7 @@
$('video', self).get(0).play();
$(this).toggleClass('paused');
$(this).text(settings.controlText[1]);
- });
+ });
}
},
/*
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,11 @@
+/*
+ * jQuery UI CSS Framework 1.8.12
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming
+ */
+@import "jquery.ui.base.css";
+@import "jquery.ui.theme.css";
@@ -0,0 +1 @@
+@import url("jquery.ui.core.css");
@@ -0,0 +1,41 @@
+/*
+ * jQuery UI CSS Framework 1.8.12
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.ui-helper-clearfix { display: inline-block; }
+/* required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix { height:1%; }
+.ui-helper-clearfix { display:block; }
+/* end clearfix */
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; }
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Oops, something went wrong.

0 comments on commit 7a49526

Please sign in to comment.