Skip to content

Commit

Permalink
moving to css model
Browse files Browse the repository at this point in the history
  • Loading branch information
Benton Rochester committed Sep 24, 2014
1 parent 9f11c89 commit aa4d67e
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 48 deletions.
Binary file added images/placeholder.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 17 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,40 +10,31 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Twitter Boostrap for Demo -->
<link rel="stylesheet" href="http:////maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<style>
.container {
position: relative
}
</style>
<!-- styles for video player -->
<link rel="stylesheet" href="src/style.css">

</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div id="background-video"></div>

<div class="container">
<div class="header">
<h3 class="text-muted">Background Video</h3>
</div>

<div class="jumbotron">
<h1>Jquery Youtube Background Video</h1>
<p class="lead">A simple wrapper for the YouTube API to create background videos</p>

<div id="anotherVideo"></div>
</div>

</div>
<div id="background-video" class="background-video">
<img src="images/placeholder.jpg" alt="" class="placeholder-image">
</div>

<div class="padding container">
<div class="jumbotron">
<h1>Jquery Youtube Background Video</h1>
<p class="lead">A simple wrapper for the YouTube API to create background videos</p>
<div id="anotherVideo"></div>
</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- ADD Jquery Video Background -->
<script src="http://www.youtube.com/iframe_api"></script>

<!-- ADD Jquery Video Background -->
<script src="src/jquery.youtubebackground.js"></script>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>

$('#background-video').YTPlayer({
Expand Down
50 changes: 28 additions & 22 deletions src/jquery.youtubebackground.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ if (typeof Object.create !== "function") {
*/
init: function init(node, userOptions) {
this.userOptions = userOptions;
$body = $('body'),
$body = $('body');
$node = $(node);
var self = this;
this.options = $.extend({}, this.defaults, this.userOptions);
Expand All @@ -46,17 +46,19 @@ if (typeof Object.create !== "function") {
this.createContainerVideo();
}

// Throttled Resize Event
// Listen for Resize Event
$(window).on('resize', function() {
self.resize(self);
});
self.resize(self);

// Listen for Gobal YT player callback
window.onYouTubeIframeAPIReady = function() {
self.onYouTubeIframeAPIReady(self);
};

// Loading YT script after we add iframe rady
$.getScript("https://www.youtube.com/iframe_api");

return this;
},

Expand All @@ -65,29 +67,30 @@ if (typeof Object.create !== "function") {
* Adds HTML for video in a container
*/
createContainerVideo: function createContainerVideo() {
var YTPlayerContainer = '<div id="YTPlayer-container" style="overflow: hidden; position: absolute; z-index: 0; top: 0; left: 0; right: 0; bottom: 0; min-width: 100%; height: 100%"><div id="YTPlayer-player" style="position: absolute"></div></div><div id="YTPlayer-shield" style="width: 100%; height: 100%; z-index: 2; position: absolute; left: 0; top: 0;"></div>';
$node.append(YTPlayerContainer);

/*jshint multistr: true */
var $YTPlayerString = $('<div id="ytplayer-container" class="ytplayer-container container"> \
<div id="ytplayer-player" class="ytplayer-player"></div> \
</div> \
<div id="ytplayer-shield"></div>');

$node.append($YTPlayerString);
//$node.css({background: 'none'});
},

/**
* @function createBackgroundVideo
* Adds HTML for video background
*/
createBackgroundVideo: function createBackgroundVideo() {
// build container
var YTPlayerContainer = '<div id="YTPlayer-container" style="overflow: hidden; position: fixed; z-index: 0; top: 0; left: 0; right: 0; bottom: 0; min-width: 100%; height: 100%"><div id="YTPlayer-player" style="position: absolute"></div></div><div id="YTPlayer-shield" style="width: 100%; height: 100%; z-index: 2; position: absolute; left: 0; top: 0;"></div>';

// set up css prereq's, inject YTPlayer container and set up wrapper defaults
$('html,body').css({
'width': '100%',
'height': '100%'
});
$body.prepend(YTPlayerContainer);
$node.css({
position: 'relative',
'z-index': this.options.wrapperZIndex
});

/*jshint multistr: true */
var $YTPlayerString = $('<div id="ytplayer-container" class="ytplayer-container background">\
<div id="ytplayer-player" class="ytplayer-player"></div>\
</div>\
<div id="ytplayer-shield"></div>');

$node.append($YTPlayerString);
// $node.css({background: 'none'});
},

/**
Expand All @@ -106,9 +109,8 @@ if (typeof Object.create !== "function") {
pWidth, // player width, to be defined
height = container.height(),
pHeight, // player height, tbd
$YTPlayerPlayer = $('#YTPlayer-player');
$YTPlayerPlayer = $('#ytplayer-player');

self.options.width = width;
// when screen aspect ratio differs from video, video must center and underlay one dimension
if (width / self.options.ratio < height) {
pWidth = Math.ceil(height * self.options.ratio); // get new player width
Expand All @@ -131,7 +133,8 @@ if (typeof Object.create !== "function") {
* Youtube API calls this function when the player is ready.
*/
onYouTubeIframeAPIReady: function onYouTubeIframeAPIReady(self) {
player = new window.YT.Player('YTPlayer-player', {

player = new window.YT.Player('ytplayer-player', {
width: self.options.width,
height: Math.ceil(self.options.width / self.options.ratio),
videoId: self.options.videoId,
Expand All @@ -149,6 +152,9 @@ if (typeof Object.create !== "function") {
self.onPlayerReady(e);
},
'onStateChange': function(e) {
if(e.data === 1) {
$node.addClass('loaded')
}
self.onPlayerStateChange(e);
}
}
Expand Down
64 changes: 64 additions & 0 deletions src/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
.container {
position: relative
}

.background-video {
background-position: top center;
background-repeat: no-repeat;
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
}

video,
source {
bottom: 0;
left: 0;
min-height: 100%;
min-width: 100%;
position: absolute;
}

.loaded .ytplayer-container {
display: block;
}


.ytplayer-container {
bottom: 0;
display: none;
height: 100%;
left: 0;
min-width: 100%;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}

.placeholder-image {
height: 100%;
left: 0;
min-height: 100%;
min-width: 100%;
position: fixed;
top: 0;
z-index: 1;
}

.ytplayer-shield {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}

.ytplayer-player {
position: absolute;
}

0 comments on commit aa4d67e

Please sign in to comment.