{"id":2003,"date":"2023-11-07T11:32:31","date_gmt":"2023-11-07T11:32:31","guid":{"rendered":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/it\/?page_id=2003"},"modified":"2023-11-07T11:41:01","modified_gmt":"2023-11-07T11:41:01","slug":"slider-test","status":"publish","type":"page","link":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/","title":{"rendered":"Slider Test"},"content":{"rendered":"\n<section class=\"hero-media video-slider\">\n    <div>\n        <div class=\"slide\">\n            <video class=\"lazy-video\" data-src=\"\/wp-content\/uploads\/sites\/6\/2023\/11\/output.mp4\" muted autoplay loop preload=\"auto\"><\/video>\n        <\/div>\n        <div class=\"slide\">\n            <video class=\"lazy-video\" data-src=\"\/wp-content\/uploads\/sites\/6\/2023\/11\/output.mp4\" muted autoplay loop preload=\"auto\"><\/video>\n        <\/div>\n        <div class=\"slide\">\n            <video class=\"lazy-video\" data-src=\"\/wp-content\/uploads\/sites\/6\/2023\/11\/output.mp4\" muted autoplay loop preload=\"auto\"><\/video>\n        <\/div>\n        <div class=\"slide\">\n            <video class=\"lazy-video\" data-src=\"\/wp-content\/uploads\/sites\/6\/2023\/11\/output.mp4\" muted autoplay loop preload=\"auto\"><\/video>\n        <\/div>\n        <div class=\"slide\">\n            <video class=\"lazy-video\" data-src=\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/it\/wp-content\/uploads\/sites\/6\/2023\/11\/output.mp4\" muted autoplay loop preload=\"auto\"><\/video>\n        <\/div>\n    <\/div>\n    <div class=\"hero-media__content container\">\n        <h1>Be inspired to live your potential<\/h1>\n    <\/div>\n<\/section>\n\n<style>\n    .video-slider {\n        height: 100vh;\n        max-height: 700px;\n        margin-top: -5rem;\n    }\n\n    .slide {\n        width: 100%;\n        height: 100%;\n        position: absolute;\n        top: 0;\n        opacity: 0;\n        transition: opacity 0.3s ease-in-out;\n    }\n\n    .lazy-video {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    @media (min-width: 768px) {\n        .video-slider {\n            height: 100vh;\n            max-height: 850px;\n        }\n    }\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  const slides = document.querySelectorAll(\".slide\");\n  let currentSlide = 0;\n  let intervalId = null;\n\n  function loadVideo(index) {\n    const video = slides[index].querySelector(\".lazy-video\");\n    if (video && !video.src && video.dataset.src) {\n      video.src = video.dataset.src;\n\n      \/\/ Add an event listener for the \"loadedmetadata\" event\n      video.addEventListener(\"loadedmetadata\", function () {\n        \/\/ Get the video duration\n        const videoDuration = video.duration;\n        \n        \/\/ Start the timer for the transition based on video duration\n        startTransitionTimer(index, videoDuration);\n      });\n    }\n  }\n\n  function showSlide(index) {\n    slides[currentSlide].style.opacity = 0;\n    slides[index].style.opacity = 1;\n    currentSlide = index;\n  }\n\n  function startTransitionTimer(index, videoDuration) {\n    \/\/ Clear the previous interval\n    if (intervalId) {\n      clearInterval(intervalId);\n    }\n\n    \/\/ Set the timer value based on the video duration\n    intervalId = setInterval(function () {\n      const nextIndex = (currentSlide + 1) % slides.length;\n      loadVideo(nextIndex);\n      showSlide(nextIndex);\n    }, videoDuration * 1000); \/\/ Convert video duration to milliseconds\n  }\n\n  \/\/ Initialize the first video and slide\n  loadVideo(currentSlide);\n  showSlide(currentSlide);\n});\n\n<\/script>\n\n\n\n<div class=\"video-slider\">\n  <div class=\"slide\">\n    <video class=\"lazy-video\" data-src=\"\/wp-content\/uploads\/sites\/6\/2023\/11\/output.mp4\" controls muted autoplay loop><\/video>\n  <\/div>\n  <div class=\"slide\">\n    <video class=\"lazy-video\" data-src=\"\/wp-content\/uploads\/sites\/6\/2023\/11\/output.mp4\" controls muted autoplay loop><\/video>\n  <\/div>\n  <!-- Add more slide elements for each video snippet -->\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Be inspired to live your potential<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Slider Test - Bhakti Marga Italia<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Slider Test - Bhakti Marga Italia\" \/>\n<meta property=\"og:description\" content=\"Be inspired to live your potential\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/\" \/>\n<meta property=\"og:site_name\" content=\"Bhakti Marga Italia\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-07T11:41:01+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/\",\"url\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/\",\"name\":\"Slider Test - Bhakti Marga Italia\",\"isPartOf\":{\"@id\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/#website\"},\"datePublished\":\"2023-11-07T11:32:31+00:00\",\"dateModified\":\"2023-11-07T11:41:01+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Slider Test\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/#website\",\"url\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/\",\"name\":\"Bhakti Marga Italia\",\"description\":\"Base bhakti marga website for all the countries.\",\"publisher\":{\"@id\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/#organization\",\"name\":\"Bhakti Marga Italia\",\"url\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/wp-content\/uploads\/sites\/6\/2023\/10\/spn-logo-white.svg\",\"contentUrl\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/wp-content\/uploads\/sites\/6\/2023\/10\/spn-logo-white.svg\",\"width\":251,\"height\":44,\"caption\":\"Bhakti Marga Italia\"},\"image\":{\"@id\":\"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Slider Test - Bhakti Marga Italia","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_GB","og_type":"article","og_title":"Slider Test - Bhakti Marga Italia","og_description":"Be inspired to live your potential","og_url":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/","og_site_name":"Bhakti Marga Italia","article_modified_time":"2023-11-07T11:41:01+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/","url":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/","name":"Slider Test - Bhakti Marga Italia","isPartOf":{"@id":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/#website"},"datePublished":"2023-11-07T11:32:31+00:00","dateModified":"2023-11-07T11:41:01+00:00","breadcrumb":{"@id":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/slider-test\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/"},{"@type":"ListItem","position":2,"name":"Slider Test"}]},{"@type":"WebSite","@id":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/#website","url":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/","name":"Bhakti Marga Italia","description":"Base bhakti marga website for all the countries.","publisher":{"@id":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/#organization","name":"Bhakti Marga Italia","url":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/#\/schema\/logo\/image\/","url":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/wp-content\/uploads\/sites\/6\/2023\/10\/spn-logo-white.svg","contentUrl":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/wp-content\/uploads\/sites\/6\/2023\/10\/spn-logo-white.svg","width":251,"height":44,"caption":"Bhakti Marga Italia"},"image":{"@id":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/wp-json\/wp\/v2\/pages\/2003"}],"collection":[{"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/wp-json\/wp\/v2\/comments?post=2003"}],"version-history":[{"count":5,"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/wp-json\/wp\/v2\/pages\/2003\/revisions"}],"predecessor-version":[{"id":2010,"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/wp-json\/wp\/v2\/pages\/2003\/revisions\/2010"}],"wp:attachment":[{"href":"https:\/\/dev-multiwp.bhaktimarga.mediactive-network.net\/italy\/wp-json\/wp\/v2\/media?parent=2003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}