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. Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? 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.