Skip to content

Instantly share code, notes, and snippets.

@gormus

gormus/index.html

Created April 14, 2017 21:39
Show Gist options
  • Save gormus/caa7e1474cd4171cab2c9b49854fe523 to your computer and use it in GitHub Desktop.
Save gormus/caa7e1474cd4171cab2c9b49854fe523 to your computer and use it in GitHub Desktop.
Download ZIP
Background Video Player // source https://jsbin.com/towufeb
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Background Video Player</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<style id="jsbin-css">
.youtube-bgvideo-container {
position: relative;
margin-bottom: 2em;
z-index: 10;
background-size: cover;
background-position: center;
}
.youtube-bgvideo-overlay {
position: absolute;
z-index: 12;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: 0 auto;
background-color: rgba(255,0,0,0.3);
color: #fff;
}
.youtube-bgvideo-overlay-content {
padding: 20px 0;
}
.youtube-bgvideo {
position: relative;
z-index: 11;
background: transparent;
min-height: 390px;
overflow: hidden;
}
.ytplayer-container {
position: absolute;
z-index: -1;
top: 50%;
transform: translateY(-50%);
}
.ytplayer-shield {
background-color: rgba(0,0,0,0.3);
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#youtube-bgvideo {
height: 500px;
}
.gradient {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10 preview */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-8 */
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="container-fluid-or-not">
<div class="row">
<div class="col-sm-12">
<div class="youtube-bgvideo-container" style="background-image: url('http://www.wallpapereast.com/static/images/1321922_STpOMHj.jpg');">
<div class="youtube-bgvideo-overlay container">
<div class="youtube-bgvideo-overlay-content">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<div class="youtube-bgvideo" id="youtube-bgvideo"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
/*
* YoutubeBackground - A wrapper for the Youtube API - Great for fullscreen background videos or just regular videos.
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
*
* Version: 1.0.5
*
*/
// Chain of Responsibility pattern. Creates base class that can be overridden.
if (typeof Object.create !== "function") {
Object.create = function(obj) {
function F() {}
F.prototype = obj;
return new F();
};
}
(function($, window, document) {
var
loadAPI = function loadAPI(callback) {
// Load Youtube API
var tag = document.createElement('script'),
head = document.getElementsByTagName('head')[0];
if(window.location.origin == 'file://') {
tag.src = 'http://www.youtube.com/iframe_api';
} else {
tag.src = '//www.youtube.com/iframe_api';
}
head.appendChild(tag);
// Clean up Tags.
head = null;
tag = null;
iframeIsReady(callback);
},
iframeIsReady = function iframeIsReady(callback) {
// Listen for Gobal YT player callback
if (typeof YT === 'undefined' && typeof window.loadingPlayer === 'undefined') {
// Prevents Ready Event from being called twice
window.loadingPlayer = true;
// Creates deferred so, other players know when to wait.
window.dfd = $.Deferred();
window.onYouTubeIframeAPIReady = function() {
window.onYouTubeIframeAPIReady = null;
window.dfd.resolve( "done" );
callback();
};
} else if (typeof YT === 'object') {
callback();
} else {
window.dfd.done(function( name ) {
callback();
});
}
};
// YTPlayer Object
YTPlayer = {
player: null,
// Defaults
defaults: {
ratio: 16 / 9,
videoId: 'LSmgKRx5pBo',
mute: true,
repeat: true,
width: $(window).width(),
playButtonClass: 'YTPlayer-play',
pauseButtonClass: 'YTPlayer-pause',
muteButtonClass: 'YTPlayer-mute',
volumeUpClass: 'YTPlayer-volume-up',
volumeDownClass: 'YTPlayer-volume-down',
start: 0,
pauseOnScroll: false,
fitToBackground: true,
playerVars: {
iv_load_policy: 3,
modestbranding: 1,
autoplay: 1,
controls: 0,
showinfo: 0,
wmode: 'opaque',
branding: 0,
autohide: 0
},
events: null
},
/**
* @function init
* Intializes YTPlayer object
*/
init: function init(node, userOptions) {
var self = this;
self.userOptions = userOptions;
self.$body = $('body'),
self.$node = $(node),
self.$window = $(window);
// Setup event defaults with the reference to this
self.defaults.events = {
'onReady': function(e) {
self.onPlayerReady(e);
// setup up pause on scroll
if (self.options.pauseOnScroll) {
self.pauseOnScroll();
}
// Callback for when finished
if (typeof self.options.callback == 'function') {
self.options.callback.call(this);
}
},
'onStateChange': function(e) {
if (e.data === 1) {
self.$node.find('img').fadeOut(400);
self.$node.addClass('loaded');
} else if (e.data === 0 && self.options.repeat) { // video ended and repeat option is set true
self.player.seekTo(self.options.start);
}
}
}
self.options = $.extend(true, {}, self.defaults, self.userOptions);
self.options.height = Math.ceil(self.options.width / self.options.ratio);
self.ID = (new Date()).getTime();
self.holderID = 'YTPlayer-ID-' + self.ID;
if (self.options.fitToBackground) {
self.createBackgroundVideo();
} else {
self.createContainerVideo();
}
// Listen for Resize Event
self.$window.on('resize.YTplayer' + self.ID, function() {
self.resize(self);
});
loadAPI(self.onYouTubeIframeAPIReady.bind(self));
self.resize(self);
return self;
},
/**
* @function pauseOnScroll
* Adds window events to pause video on scroll.
*/
pauseOnScroll: function pauseOnScroll() {
var self = this;
self.$window.on('scroll.YTplayer' + self.ID, function() {
var state = self.player.getPlayerState();
if (state === 1) {
self.player.pauseVideo();
}
});
self.$window.scrollStopped(function(){
var state = self.player.getPlayerState();
if (state === 2) {
self.player.playVideo();
}
});
},
/**
* @function createContainerVideo
* Adds HTML for video in a container
*/
createContainerVideo: function createContainerVideo() {
var self = this;
/*jshint multistr: true */
var $YTPlayerString = $('<div id="ytplayer-container' + self.ID + '" >\
<div id="' + self.holderID + '" class="ytplayer-player-inline"></div> \
</div> \
<div id="ytplayer-shield" class="ytplayer-shield"></div>');
self.$node.append($YTPlayerString);
self.$YTPlayerString = $YTPlayerString;
$YTPlayerString = null;
},
/**
* @function createBackgroundVideo
* Adds HTML for video background
*/
createBackgroundVideo: function createBackgroundVideo() {
/*jshint multistr: true */
var self = this,
$YTPlayerString = $('<div id="ytplayer-container' + self.ID + '" class="ytplayer-container background">\
<div id="' + self.holderID + '" class="ytplayer-player"></div>\
</div>\
<div id="ytplayer-shield" class="ytplayer-shield"></div>');
self.$node.append($YTPlayerString);
self.$YTPlayerString = $YTPlayerString;
$YTPlayerString = null;
},
/**
* @function resize
* Resize event to change video size
*/
resize: function resize(self) {
//var self = this;
var container = $(window);
if (!self.options.fitToBackground) {
container = self.$node;
}
var width = container.width(),
pWidth, // player width, to be defined
height = container.height(),
pHeight, // player height, tbd
$YTPlayerPlayer = $('#' + self.holderID);
// 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
$YTPlayerPlayer.width(pWidth).height(height).css({
left: (width - pWidth) / 2,
top: 0
}); // player width is greater, offset left; reset top
} else { // new video width < window width (gap to right)
pHeight = Math.ceil(width / self.options.ratio); // get new player height
$YTPlayerPlayer.width(width).height(pHeight).css({
left: 0,
top: (height - pHeight) / 2
}); // player height is greater, offset top; reset left
}
$YTPlayerPlayer = null;
container = null;
},
/**
* @function onYouTubeIframeAPIReady
* @ params {object} YTPlayer object for access to options
* Youtube API calls this function when the player is ready.
*/
onYouTubeIframeAPIReady: function onYouTubeIframeAPIReady() {
var self = this;
self.player = new window.YT.Player(self.holderID, self.options);
},
/**
* @function onPlayerReady
* @ params {event} window event from youtube player
*/
onPlayerReady: function onPlayerReady(e) {
if (this.options.mute) {
e.target.mute();
}
e.target.playVideo();
},
/**
* @function getPlayer
* returns youtube player
*/
getPlayer: function getPlayer() {
return this.player;
},
/**
* @function destroy
* destroys all!
*/
destroy: function destroy() {
var self = this;
self.$node
.removeData('yt-init')
.removeData('ytPlayer')
.removeClass('loaded');
self.$YTPlayerString.remove();
$(window).off('resize.YTplayer' + self.ID);
$(window).off('scroll.YTplayer' + self.ID);
self.$body = null;
self.$node = null;
self.$YTPlayerString = null;
self.player.destroy();
self.player = null;
}
};
// Scroll Stopped event.
$.fn.scrollStopped = function(callback) {
var $this = $(this), self = this;
$this.scroll(function(){
if ($this.data('scrollTimeout')) {
clearTimeout($this.data('scrollTimeout'));
}
$this.data('scrollTimeout', setTimeout(callback,250,self));
});
};
// Create plugin
$.fn.YTPlayer = function(options) {
return this.each(function() {
var el = this;
$(el).data("yt-init", true);
var player = Object.create(YTPlayer);
player.init(el, options);
$.data(el, "ytPlayer", player);
});
};
})(jQuery, window, document);
</script>
<script id="jsbin-javascript">
$('#youtube-bgvideo').YTPlayer({
fitToBackground: 1,
videoId: 'W0LHTWG-UmQ',
pauseOnScroll: 0,
mute: 1,
repeat: 1,
playerVars: {
modestbranding: 1,
autoplay: 1,
controls: 0,
showinfo: 0,
wmode: 'transparent',
branding: 0,
rel: 0,
autohide: 1,
origin: window.location.origin
}
});
$('.ytplayer-shield').addClass('gradient');
</script>
<script id="jsbin-source-css" type="text/css">.youtube-bgvideo-container {
position: relative;
margin-bottom: 2em;
z-index: 10;
background-size: cover;
background-position: center;
}
.youtube-bgvideo-overlay {
position: absolute;
z-index: 12;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: 0 auto;
background-color: rgba(255,0,0,0.3);
color: #fff;
}
.youtube-bgvideo-overlay-content {
padding: 20px 0;
}
.youtube-bgvideo {
position: relative;
z-index: 11;
background: transparent;
min-height: 390px;
overflow: hidden;
}
.ytplayer-container {
position: absolute;
z-index: -1;
top: 50%;
transform: translateY(-50%);
}
.ytplayer-shield {
background-color: rgba(0,0,0,0.3);
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#youtube-bgvideo {
height: 500px;
}
.gradient {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10 preview */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-8 */
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$('#youtube-bgvideo').YTPlayer({
fitToBackground: 1,
videoId: 'W0LHTWG-UmQ',
pauseOnScroll: 0,
mute: 1,
repeat: 1,
playerVars: {
modestbranding: 1,
autoplay: 1,
controls: 0,
showinfo: 0,
wmode: 'transparent',
branding: 0,
rel: 0,
autohide: 1,
origin: window.location.origin
}
});
$('.ytplayer-shield').addClass('gradient');
</script></body>
</html>
Raw
jsbin.towufeb.css
.youtube-bgvideo-container {
position: relative;
margin-bottom: 2em;
z-index: 10;
background-size: cover;
background-position: center;
}
.youtube-bgvideo-overlay {
position: absolute;
z-index: 12;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: 0 auto;
background-color: rgba(255,0,0,0.3);
color: #fff;
}
.youtube-bgvideo-overlay-content {
padding: 20px 0;
}
.youtube-bgvideo {
position: relative;
z-index: 11;
background: transparent;
min-height: 390px;
overflow: hidden;
}
.ytplayer-container {
position: absolute;
z-index: -1;
top: 50%;
transform: translateY(-50%);
}
.ytplayer-shield {
background-color: rgba(0,0,0,0.3);
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#youtube-bgvideo {
height: 500px;
}
.gradient {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10 preview */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-8 */
}
Raw
jsbin.towufeb.js
$('#youtube-bgvideo').YTPlayer({
fitToBackground: 1,
videoId: 'W0LHTWG-UmQ',
pauseOnScroll: 0,
mute: 1,
repeat: 1,
playerVars: {
modestbranding: 1,
autoplay: 1,
controls: 0,
showinfo: 0,
wmode: 'transparent',
branding: 0,
rel: 0,
autohide: 1,
origin: window.location.origin
}
});
$('.ytplayer-shield').addClass('gradient');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment