/** * HD Slider module - Fusion Slider background video, phone/tablet/desktop. * * Avada decides whether to show slider background video with a UA sniff * (.ua-mobile), which lumps tablets in with phones and, on iPadOS - where * Safari requests the desktop site by default - is not even applied * consistently. These rules replace that decision with an explicit * opt-in driven by the module JS. * * MODEL * default (no JS) -> poster image, no video * html.hd-slider-video -> background video, poster hidden * * The JS adds .hd-slider-video to in the head, before the slider * markup is parsed, so there is no flash. Defaulting to the poster means * a JS failure degrades to a still frame rather than an empty hero, and * it guarantees no video is fetched on devices that will never show one. * * The video/poster choice itself (viewport, reduced-motion, Data Saver, * the hd_slider_video_on_phone filter) lives in js/slider.js - conditions * like Data Saver simply are not expressible in CSS. * * Scoped entirely to .tfs-slider. * * On !important: Avada concatenates its CSS into a single combined file * enqueued AFTER this one, and keys its mobile rules on .ua-mobile * (higher specificity than a plain .tfs-slider selector). Plain * declarations here would lose on both counts. */ /* --------------------------------------------------------------- Base: poster image. Applies until the JS opts in to video. --------------------------------------------------------------- */ .tfs-slider .mobile_video_image, .ua-mobile .tfs-slider .mobile_video_image { display: block !important; width: 100%; height: 100%; z-index: 4; background-size: cover; background-position: center center; } .tfs-slider .self-hosted-video-bg, .ua-mobile .tfs-slider .self-hosted-video-bg { display: none !important; } /* --------------------------------------------------------------- Video mode. Undoes the .ua-mobile suppression that was blanking the hero on iPad and every other touch device. Specificity (0,3,1) deliberately outranks Avada's (0,3,0). --------------------------------------------------------------- */ html.hd-slider-video .tfs-slider .mobile_video_image { display: none !important; } html.hd-slider-video .tfs-slider .self-hosted-video-bg { display: block !important; } /* --------------------------------------------------------------- Reduced motion: poster image, unconditionally. A looping background video is motion; honouring the OS setting is a standing requirement for HD modules on this site. Restated here so it holds even if the video class is somehow applied. --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.hd-slider-video .tfs-slider .mobile_video_image { display: block !important; width: 100%; height: 100%; z-index: 4; background-size: cover; background-position: center center; } html.hd-slider-video .tfs-slider .self-hosted-video-bg { display: none !important; } }