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: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. 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
Create an account or sign in to comment
You need to be a member in order to leave a comment