Home page video no longer working

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 3 months, 3 weeks ago.

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #21516

    angelabach
    Participant

    Supported

    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?

    #21517

    angelabach
    Participant

    Supported

    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

    #21518

    angelabach
    Participant

    Supported

    initplayer.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;
    }
    });

    #21519

    angelabach
    Participant

    Supported

    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);

    #21772

    angelabach
    Participant

    Supported
    This reply has been marked as private.
    #21929

    CTHthemes
    Keymaster

    Hi, send me your site address + administrator account to check.
    Also restore the script to joomla template version.

    #22089

    angelabach
    Participant

    Supported
    This reply has been marked as private.
    #22274

    angelabach
    Participant

    Supported

    Have you been able to take a look?

    #22374

    CTHthemes
    Keymaster

    Hi,
    Is this your site: http://westoverhills.church ?
    I’ve checked and it’s still working. Both on Safari and Chrome browser.

    #22385

    angelabach
    Participant

    Supported

    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.

    Attachments:
    You must be logged in to view attached files.
    #22458

    CTHthemes
    Keymaster

    I’ve updated okvideo plugin to latest version. So please check if it’s working.

    #22490

    angelabach
    Participant

    Supported

    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

    Attachments:
    You must be logged in to view attached files.
    #22514

    CTHthemes
    Keymaster

    The problem was fixed. Check it again.
    And don’t restore the change.

    #22529

    angelabach
    Participant

    Supported

    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?

    Attachments:
    You must be logged in to view attached files.
    #22644

    angelabach
    Participant

    Supported

    Chrome 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.
    #22663

    CTHthemes
    Keymaster

    Hi, 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.

    #22708

    angelabach
    Participant

    Supported

    I 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?

    #22709

    angelabach
    Participant

    Supported

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

Viewing 18 posts - 1 through 18 (of 18 total)

You must be logged in to reply to this topic.

Hello! CityBook version 1.2.7 was released. Bulk Import Add-On, OpenStreetMapView Details
+