Nils Posted September 17, 2020 Share Posted September 17, 2020 Hi! Just noticed that the fallback i have used (jpeg 23kb) is not showing on newer Iphones (11), just a white background color. It was working a few days ago but now it doesn't load unless i navigate around the page and come back to the index page, and somehow forces the page to load it in. It works on earlier Iphones and even shows the video too and not only the fallback image. (Iphone,7,8) I am so frustrated with squarespace and the issues they have with video banners. They take incredible long time to show and you cant host your own. (must use vimeo, youtube etc) Link to comment
paul2009 Posted September 17, 2020 Share Posted September 17, 2020 Have you contacted Squarespace Customer Care about this issue? There have been a number of issues with Background Videos, but if Squarespace don't receive feedback from users, they won't know about them. You can reach out to them here by opening a support ticket. About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
Nils Posted September 19, 2020 Author Share Posted September 19, 2020 I found a sollution to this which forces the browser to load the fallback before the video: Go to SETTINGS - ADVANCED - INSERT CODE Insert this code in the FOOTER block: <script type="text/javascript"> (function(){ // Custom script to load the fallback image of a video in the background while loading var startObserver = function(sqsVideoEl){ var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; if (!MutationObserver){ return; } var getPlayerElement = function () { // the element changes from div to iframe during runtime, id is the same though. return sqsVideoEl.querySelector('#player'); } var fallbackImageElement = sqsVideoEl.querySelector('.custom-fallback-image'); var isVideoReady = function(){ return sqsVideoEl.querySelector('#player.ready'); } var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (isVideoReady()) { observer.disconnect(); getPlayerElement().style.opacity = 1.0; fallbackImageElement.style.display = "none"; } }); }); var isIframeLoaded = function (){ if (!sqsVideoEl.querySelector('iframe#player')) { setTimeout(isIframeLoaded, 150) } else { observer.observe(getPlayerElement(), { attributes : true }); } } if(!isVideoReady()){ getPlayerElement().style.opacity = 0.0; fallbackImageElement.style.opacity = 1.0; fallbackImageElement.style.display = "block"; isIframeLoaded(); } } var init = function(){ // As there can be multiple background video's on a single page we do this for all of them in a loop. var items = document.getElementsByClassName('sqs-video-background'); var items_len = items.length; for (var i = 0; i < items_len; i++) { var el = items[i]; startObserver(el); } } try{ init(); }catch(err){ if (console && console.error){ console.error('Error while trying to load fallback images by default (manual code injection script in Settings > Advanced):', err); } } })() </script> Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.