Home page video no longer working

If it helps, I originally posted this issue to the HTML version because I had bought both templates and added support for the wrong one. Below is what support@kwst.net sent me. Maybe it will help you determine the fix for the Joomla version.

—–

Now we completely update the plugin :

1. Html :

<div class=”player” data-vid=”oDpSPNIozt8″ data-mv=”1″></div>

data-vid=”oDpSPNIozt8″ – add you video url (in quotes)

2. JS

Update file okvideo.js and initplayer.js

3. CSS

In the end of file style.css add this code :

.background-video {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
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;
height: 100%;
left: 0;
min-width: 100%;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
.ytplayer-shield {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
.ytplayer-player {
position: absolute;
}

after this steps : clear browser cache

okvideo.js

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) {
var tag = document.createElement(‘script’),
head = document.getElementsByTagName(‘head’)[0];
tag.src = location.protocol + ‘//www.youtube.com/iframe_api’;
head.appendChild(tag);
head = null;
tag = null;

iframeIsReady(callback);
},
iframeIsReady = function iframeIsReady(callback) {
if (typeof YT === ‘undefined’ && typeof window.loadingPlayer === ‘undefined’) {
window.loadingPlayer = true;
window.dfd = $.Deferred();
window.onYouTubeIframeAPIReady = function() {
window.onYouTubeIframeAPIReady = null;
window.dfd.resolve( “John” );
callback();
};
} else {
window.dfd.done(function( name ) {
callback();
});
}
};
YTPlayer = {
player: null,
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: {
modestbranding: 1,
autoplay: 1,
controls: 0,
showinfo: 0,
wmode: ‘transparent’,
branding: 0,
rel: 0,
autohide: 0,
origin: window.location.origin
},
events: null
},
init: function init(node, userOptions) {
var self = this;
self.userOptions = userOptions;
self.$body = $(‘body’),
self.$node = $(node),
self.$window = $(window);
self.defaults.events = {
onReady: function(e) {
self.onPlayerReady(e);
if (self.options.pauseOnScroll) {
self.pauseOnScroll();
}
if (typeof self.options.callback == ‘function’) {
self.options.callback.call(this);
}
},
onStateChange: function(e) {
if (e.data === 1) {
self.$node.addClass(‘loaded’);
} else if (e.data === 0 && self.options.repeat) {
self.player.seekTo(self.options.start);
}
}
}
self.options = $.extend(true, {}, self.defaults, self.userOptions);
self.ID = (new Date()).getTime();
self.holderID = ‘YTPlayer-ID-‘ + self.ID;
if (self.options.fitToBackground) {
self.createBackgroundVideo();
} else {
self.createContainerVideo();
}
self.$window.on(‘resize.YTplayer’ + self.ID, function() {
self.resize(self);
});

loadAPI(self.onYouTubeIframeAPIReady.bind(self));

self.resize(self);

return self;
},
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();
}
});
},
createContainerVideo: function createContainerVideo() {
var self = this;
var $YTPlayerString = $(‘<div id=”ytplayer-container’ + self.ID + ‘” >\
<div id=”‘ + self.holderID + ‘” class=”ytplayer-player”></div> \
</div> \
<div id=”ytplayer-shield”></div>’);

self.$node.append($YTPlayerString);
self.$YTPlayerString = $YTPlayerString;
$YTPlayerString = null;
},
createBackgroundVideo: function createBackgroundVideo() {
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”></div>’);

self.$node.append($YTPlayerString);
self.$YTPlayerString = $YTPlayerString;
$YTPlayerString = null;
},
resize: function resize(self) {
var container = $(window);

if (!self.options.fitToBackground) {
container = self.$node;
}
var width = container.width(),
pWidth,
height = container.height(),
pHeight,
$YTPlayerPlayer = $(‘#’ + self.holderID);
if (width / self.options.ratio < height) {
pWidth = Math.ceil(height * self.options.ratio);
$YTPlayerPlayer.width(pWidth).height(height).css({
left: (width – pWidth) / 2,
top: 0
});
} else {
pHeight = Math.ceil(width / self.options.ratio); // get new player height
$YTPlayerPlayer.width(width).height(pHeight).css({
left: 0,
top: 0
});
}
$YTPlayerPlayer = null;
container = null;
},
onYouTubeIframeAPIReady: function onYouTubeIframeAPIReady() {
var self = this;

self.player = new window.YT.Player(self.holderID, {
width: self.options.width,
height: Math.ceil(self.options.width / self.options.ratio),
videoId: self.options.videoId,
playerVars: self.options.playerVars,
events: self.options.events
});
},
onPlayerReady: function onPlayerReady(e) {
if (this.options.mute) {
e.target.mute();
}
e.target.playVideo();
},
getPlayer: function getPlayer() {
return this.player;
},
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;
}
};
$.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));
});
};
$.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);

Have you been able to take a look?

It’s not working. See screen shot taken just now. It’s not just me who is experiencing problems. I’ve heard it from customers and my bosses. I need to get this resolved. Please help.

It’s worse now!

See attached screenshot. The video disappears and slide show goes behind the parallax image.

Or view the site yourself: http://westoverhills.church

Thank you. But in Chrome, I’m still getting a still video with a play button that doesn’t work. So it’s back to what I originally posted about. Can you at least get it to where the button causes the video to play?

Also, when Google forces all sites to use https starting July 1, or be marked “not secure,” I will have a new problem. It doesn’t load the video at all because it’s detecting “unsafe scripts.” See other attachment. How do I fix that?

Also, when I force https (in Joomla global configuration), the home page video stops working in Firefox and Safari too.