{"id":1130,"date":"2026-02-19T10:33:45","date_gmt":"2026-02-19T10:33:45","guid":{"rendered":"https:\/\/fice.com.hr\/?page_id=1130"},"modified":"2026-02-19T13:20:21","modified_gmt":"2026-02-19T13:20:21","slug":"video-hero","status":"publish","type":"page","link":"https:\/\/fice.com.hr\/hr\/video-hero\/","title":{"rendered":"Video Hero"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1130\" class=\"elementor elementor-1130\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65de334 e-con-full maker-big-container e-flex e-con e-parent\" data-id=\"65de334\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-02862fc e-con-full e-flex e-con e-child\" data-id=\"02862fc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c410414 elementor-widget elementor-widget-video\" data-id=\"c410414\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;video_type&quot;:&quot;hosted&quot;,&quot;mute&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"https:\/\/fice.com.hr\/wp-content\/uploads\/2026\/02\/design-1.mp4\" preload=\"metadata\" muted=\"muted\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-247f3f3 e-con-full e-flex e-con e-child\" data-id=\"247f3f3\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-873d599 elementor-widget elementor-widget-heading\" data-id=\"873d599\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Your Brand. Unframed.<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1338087 elementor-widget elementor-widget-heading\" data-id=\"1338087\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">When creativity escapes the frame, stories begin to move.<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-06ea948 elementor-widget elementor-widget-button\" data-id=\"06ea948\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#Port\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Get Creative<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-118537a elementor-widget elementor-widget-html\" data-id=\"118537a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\n  \/\/ You can edit the VIDEO_END_ADJUST value to change the point during scroll at which the video stops playing\r\n  \/\/ Example - set it to 0.5 to stop playing half-a-screen-height later, or -0.5 to stop playing half-a-screen-height earlier\r\n  const VIDEO_END_ADJUST = 0.5;\r\n\r\n  \/\/ That's it, you can stop editing here! Enjoy!\r\n  const BIG_CONTAINER = 'maker-big-container';\r\n  const SMALL_CONTAINER = 'maker-small-container';\r\n\r\n  gsap.registerPlugin(ScrollTrigger);\r\n  const endMarkerOffset = () => window.innerHeight * VIDEO_END_ADJUST;\r\n\r\n  const initScrollScrub = (wrapper, video) => {\r\n    return ScrollTrigger.create({\r\n      trigger: wrapper,\r\n      start: 'top top',\r\n      end: `bottom bottom-=${endMarkerOffset()}px`,\r\n      scrub: true,\r\n      markers: false,\r\n      onUpdate(self) {\r\n        if (video.duration) {\r\n          video.currentTime = self.progress * video.duration;\r\n        }\r\n      }\r\n    });\r\n  };\r\n\r\n  const wrappers = document.querySelectorAll('.' + BIG_CONTAINER);\r\n\r\n  wrappers.forEach(wrapper => {\r\n    const video = wrapper.querySelector('video');\r\n    if (!video) return;\r\n\r\n    const childDivs = wrapper.querySelectorAll(':scope > div');\r\n    childDivs.forEach(div => {\r\n      if (div.querySelector('.elementor-widget-video') && !div.classList.contains(SMALL_CONTAINER))\r\n        div.classList.add(SMALL_CONTAINER);\r\n    });\r\n\r\n    video.setAttribute('muted', '');\r\n    video.setAttribute('playsinline', '');\r\n    video.setAttribute('webkit-playsinline', '');\r\n    video.setAttribute('preload', 'auto');\r\n    video.load();\r\n\r\n    const setupScrub = () => {\r\n      wrapper._scrubTrigger = initScrollScrub(wrapper, video);\r\n    };\r\n\r\n    if (video.readyState >= 2) {\r\n      setupScrub();\r\n    } else {\r\n      video.addEventListener('loadeddata', setupScrub, { once: true });\r\n    }\r\n\r\n    video.addEventListener('play', () => video.pause());\r\n    video.addEventListener('click', e => e.preventDefault());\r\n  });\r\n\r\n  const rebuildTriggers = () => {\r\n    wrappers.forEach(wrapper => {\r\n      const trigger = wrapper._scrubTrigger;\r\n      if (!trigger) return;\r\n      trigger.kill();\r\n\r\n      const video = wrapper.querySelector('video');\r\n      wrapper._scrubTrigger = initScrollScrub(wrapper, video);\r\n    });\r\n  };\r\n\r\n  let resizeTimeout;\r\n  window.addEventListener('resize', () => {\r\n    clearTimeout(resizeTimeout);\r\n    resizeTimeout = setTimeout(() => {\r\n      rebuildTriggers();\r\n    }, 200);\r\n  });\r\n\r\n  \/\/ Code by WP Maker - See youtube.com\/@wpmaker for the complete scroll effect tutorial\r\n  window.addEventListener('load', () => ScrollTrigger.refresh());\r\n});\r\n<\/script>\r\n\r\n<style>\r\n.maker-small-container {\r\n  position: sticky;\r\n  top: 0;\r\n}\r\n\r\n.maker-big-container video {\r\n  min-height: 100vh;\r\n  object-position: top center;\r\n}\r\n\r\n@media (max-width: 921px) {\r\n  .maker-big-container video {\r\n    object-position: center center;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.7\/gsap.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.7\/ScrollTrigger.min.js\"><\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d8434d1 elementor-widget elementor-widget-html\" data-id=\"d8434d1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\n  \/\/ If you use something other than the Astra theme, you can edit this HEADER_SELECTOR value\r\n  \/\/ In your browser, inspect your transparent header and target it via a CSS class or ID\r\n  const HEADER_SELECTOR = '.ast-theme-transparent-header #masthead';\r\n\r\n  \/\/ That's it, you can stop editing here! Enjoy!\r\n  const BIG_CONTAINER = '.maker-big-container';\r\n  const SMALL_CONTAINER = '.maker-small-container';\r\n\r\n  const header = document.querySelector(HEADER_SELECTOR);\r\n  const wrapper = document.querySelector(BIG_CONTAINER);\r\n  const firstParent = document.querySelector('.e-parent');\r\n  if (!header || !wrapper || wrapper !== firstParent) { return; }\r\n\r\n  const style = document.createElement('style');\r\n  style.textContent = `\r\n    ${HEADER_SELECTOR}.header--float {\r\n      position: fixed;\r\n    }\r\n    ${HEADER_SELECTOR}.header--locked {\r\n      position: absolute;\r\n    }\r\n  `;\r\n  document.head.appendChild(style);\r\n\r\n  const updateHeaderState = () => {\r\n    const rect = wrapper.getBoundingClientRect();\r\n\r\n    header.classList.remove('header--float', 'header--locked');\r\n    header.style.top = '0';\r\n\r\n    if (rect.bottom > window.innerHeight) {\r\n      header.classList.add('header--float');\r\n    } else {\r\n      header.classList.add('header--locked');\r\n      const stickyDiv = wrapper.querySelector(SMALL_CONTAINER);\r\n      if (stickyDiv) {\r\n        const stickyRect = stickyDiv.getBoundingClientRect();\r\n        const docTop = window.scrollY + stickyRect.top + stickyRect.height - window.innerHeight;\r\n        header.style.top = `${docTop}px`;\r\n      }\r\n    }\r\n  };\r\n  updateHeaderState();\r\n\r\n  let ticking = false;\r\n  const onScroll = () => {\r\n    if (!ticking) {\r\n      window.requestAnimationFrame(() => {\r\n        updateHeaderState();\r\n        ticking = false;\r\n      });\r\n      ticking = true;\r\n    }\r\n  };\r\n\r\n  \/\/ Code by WP Maker - See youtube.com\/@wpmaker for the complete scroll effect tutorial\r\n  window.addEventListener('scroll', onScroll, { passive: true });\r\n  window.addEventListener('resize', updateHeaderState);\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-779ad9a elementor-widget elementor-widget-html\" data-id=\"779ad9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n\r\n  \/\/ You can edit the SCROLL_SPEED value to change how fast the page scrolls when clicking the button\r\n  \/\/ Example - set it to 1 for the scroll speed to be one-full-screen-height per second\r\n  const SCROLL_SPEED = 1.5;\r\n\r\n  \/\/ That's it, you can stop editing here! Enjoy!\r\n  const BIG_CONTAINER = '.maker-big-container';\r\n\r\n  gsap.registerPlugin(ScrollToPlugin);\r\n\r\n  document.querySelectorAll(`${BIG_CONTAINER} a[href^=\"#\"]`).forEach(function(link) {\r\n    link.addEventListener('click', function(e) {\r\n      e.preventDefault();\r\n      document.documentElement.style.scrollBehavior = 'auto';\r\n\r\n      var targetID = link.getAttribute('href');\r\n      var target = document.querySelector(targetID);\r\n      if (target) {\r\n        var startY = window.pageYOffset || document.documentElement.scrollTop;\r\n        var endY = target.getBoundingClientRect().top + startY;\r\n        var distance = Math.abs(endY - startY);\r\n        var speed = window.innerHeight * SCROLL_SPEED;\r\n        var duration = distance \/ speed;\r\n\r\n        gsap.to(window, {\r\n          duration: duration,\r\n          ease: 'sine.in',\r\n          scrollTo: { y: target, autoKill: false },\r\n          onComplete: function() {\r\n            document.documentElement.style.scrollBehavior = '';\r\n          }\r\n        });\r\n      }\r\n    });\r\n  });\r\n\r\n  \/\/ Code by WP Maker - See youtube.com\/@wpmaker for the complete scroll effect tutorial\r\n});\r\n<\/script>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.7\/ScrollToPlugin.min.js\"><\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7d17525d e-flex e-con-boxed e-con e-parent\" data-id=\"7d17525d\" data-element_type=\"container\" data-e-type=\"container\" id=\"Port\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-539314cc elementor-widget elementor-widget-elementskit-heading\" data-id=\"539314cc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-heading.default\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" ><div class=\"ekit-heading elementskit-section-title-wraper text_center   ekit_heading_tablet-   ekit_heading_mobile-\"><h2 class=\"ekit-heading--title elementskit-section-title \">Two Grid Style<\/h2><\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ce5896b elementor-widget elementor-widget-elementskit-post-grid\" data-id=\"7ce5896b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"elementskit-post-grid.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"ekit-wid-con\" >\n        <div class=\"ekit--tab__post__details ekit-post_grid\">\n                                                                                                        <div class=\"tab__post__single--item ekit___column-3 tablet-ekit___column-2 mobile-ekit___column-2 post-count-4\">\n                            <a href=\"https:\/\/fice.com.hr\/hr\/besto\/\" class=\"tab__post--header\" aria-label=\"url\">\n                                                                <div class=\"post_grid_img_thumb\" style=\"background-image: url('https:\/\/fice.com.hr\/wp-content\/uploads\/2026\/02\/1771097066959-a06dba4137242.webp')\"><\/div>\n                                                            <\/a>\n                            <h3 class=\"tab__post--title ekit-post_grid-title\"><a href=\"https:\/\/fice.com.hr\/hr\/besto\/\">Besto<\/a><\/h3>\n                        <\/div>\n                                        \n                                                                                <div class=\"tab__post__single--item ekit___column-3 tablet-ekit___column-2 mobile-ekit___column-2 post-count-4\">\n                            <a href=\"https:\/\/fice.com.hr\/hr\/hello-world\/\" class=\"tab__post--header\" aria-label=\"url\">\n                                                                <div class=\"post_grid_img_thumb\" style=\"background-image: url('https:\/\/fice.com.hr\/wp-content\/uploads\/2026\/02\/1771097066959-ce3b10ff2bd7c-300x200.webp')\"><\/div>\n                                                            <\/a>\n                            <h3 class=\"tab__post--title ekit-post_grid-title\"><a href=\"https:\/\/fice.com.hr\/hr\/hello-world\/\">Hello world!<\/a><\/h3>\n                        <\/div>\n                                        \n                        <\/div>\n    <\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>https:\/\/fice.com.hr\/wp-content\/uploads\/2026\/02\/design-1.mp4 Your Brand. Unframed. When creativity escapes the frame, stories begin to move. Get Creative Two Grid Style Besto Hello [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1130","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/fice.com.hr\/hr\/wp-json\/wp\/v2\/pages\/1130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fice.com.hr\/hr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fice.com.hr\/hr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fice.com.hr\/hr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fice.com.hr\/hr\/wp-json\/wp\/v2\/comments?post=1130"}],"version-history":[{"count":37,"href":"https:\/\/fice.com.hr\/hr\/wp-json\/wp\/v2\/pages\/1130\/revisions"}],"predecessor-version":[{"id":1187,"href":"https:\/\/fice.com.hr\/hr\/wp-json\/wp\/v2\/pages\/1130\/revisions\/1187"}],"wp:attachment":[{"href":"https:\/\/fice.com.hr\/hr\/wp-json\/wp\/v2\/media?parent=1130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}