Home › Forums › Joomla Templates › Cashemir – Responsive One Page Joomla Template › Home page video no longer working
This topic contains 17 replies, has 2 voices, and was last updated by angelabach 8 months ago.
-
AuthorPosts
-
May 25, 2018 at 9:16 pm #21516
The video on my home page suddenly stopped autoplaying in Chrome and Safari. It just displays a thumbnail with a play button. I can’t leave it that way so I replaced it with a slideshow, but I really want the video to work again.
I’m pretty sure it has to do with new rules regarding autoplay, which just went into effect in April – https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
The advice is: “If there’s no sound, set your website’s autoplay to muted and it will work once again” but changing the script to volume=O did not work. What do you recommend? Can I get updated an updated .js file that has the audio muted so it will autoplay in Chrome and Safari again?
May 25, 2018 at 9:22 pm #21517If 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
May 25, 2018 at 9:23 pm #21518initplayer.js
var l = $(“.player”).data(“vid”);
var m = $(“.player”).data(“mv”);
$(“.player”).YTPlayer({
fitToBackground: true,
videoId: l,
pauseOnScroll: true,
mute: m,
callback: function() {
var a = $(“.player”).data(“ytPlayer”).player;
}
});May 25, 2018 at 9:23 pm #21519okvideo.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);June 1, 2018 at 3:54 am #21772This reply has been marked as private.June 5, 2018 at 10:48 am #21929Hi, send me your site address + administrator account to check.
Also restore the script to joomla template version.June 8, 2018 at 6:05 am #22089This reply has been marked as private.June 13, 2018 at 10:05 pm #22274Have you been able to take a look?
June 15, 2018 at 2:48 pm #22374Hi,
Is this your site: http://westoverhills.church ?
I’ve checked and it’s still working. Both on Safari and Chrome browser.June 15, 2018 at 9:00 pm #22385It’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.
Attachments:
You must be logged in to view attached files.June 18, 2018 at 5:44 pm #22458I’ve updated okvideo plugin to latest version. So please check if it’s working.
June 19, 2018 at 3:47 am #22490It’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
Attachments:
You must be logged in to view attached files.June 19, 2018 at 3:52 pm #22514The problem was fixed. Check it again.
And don’t restore the change.June 19, 2018 at 9:07 pm #22529Thank 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?
Attachments:
You must be logged in to view attached files.June 22, 2018 at 12:23 am #22644Chrome is not loading the video AT ALL now. See attached.
The majority of our audience uses Chrome, so I will have to go back to a slideshow.I would like a refund for the additional support as my issue was not resolved.
Attachments:
You must be logged in to view attached files.June 22, 2018 at 10:14 am #22663Hi, check it again.
I also suggestion that you enable https for your site: http://prntscr.com/jxvdex it’s also helpful for fixing the problem.June 23, 2018 at 1:55 am #22708I want to switch to https, but if I turn on FORCE HTTPS, the video doesn’t work in Chrome and it gives this alert: “Insecure content blocked. This site is trying to load scripts from unauthenticated sources.”
It’s the screen shot I attached previously that shows a mostly blank site.
What do you suggest?
June 23, 2018 at 1:57 am #22709Also, when I force https (in Joomla global configuration), the home page video stops working in Firefox and Safari too.
-
AuthorPosts
You must be logged in to reply to this topic.