{"id":633,"date":"2023-07-18T06:40:17","date_gmt":"2023-07-18T06:40:17","guid":{"rendered":"https:\/\/local.casttio.com\/?page_id=633"},"modified":"2023-09-05T08:47:54","modified_gmt":"2023-09-05T08:47:54","slug":"video","status":"publish","type":"page","link":"https:\/\/local.casttio.com\/","title":{"rendered":"video"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"633\" class=\"elementor elementor-633\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5b9c6ef elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"5b9c6ef\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-narrow\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-adcf7dd\" data-id=\"adcf7dd\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f74e804 elementor-widget elementor-widget-html\" data-id=\"f74e804\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<link\r\n   rel=\"stylesheet\"\r\n   href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.1\/css\/all.min.css\"\r\n   integrity=\"sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==\"\r\n   crossorigin=\"anonymous\"\r\n   \/>\r\n<div class=\"slider-container\">\r\n   <div class=\"left-slide\">\r\n      <div style=\"background-color: #000;margin-left: 4px;\">\r\n         <img decoding=\"async\" src=\"https:\/\/dubailand.gov.ae\/media\/bynnitsl\/majid-al-marri-and-bader-al-gergawi.jpg\" style=\"position: relative;top: -100px;\" \/>\r\n         <h1 style=\"position: relative;top: -50px;text-align:center;\">Dubai Land Department, Dubai Development Authority strengthen cooperation to fulfil strategic objective of the emirate<\/h1>\r\n         <h3><i>Dubailand.gov.ae<\/i><\/h3>\r\n      <\/div>\r\n      <div style=\"background-color: #000;margin-left: 4px;\">\r\n         <img decoding=\"async\" src=\"https:\/\/dubailand.gov.ae\/media\/4zwdqykd\/dld_3388.jpg\" style=\"position: relative;top: -100px;\" \/>\r\n         <h1 style=\"position: relative;top: -50px;text-align:center;\">Dubai Land Department Unveils Incentive Benefits of Real Estate Investment Trusts Inviting Eligible Companies to Register<\/h1>\r\n         <h3><i>Dubailand.gov.ae<\/i><\/h3>\r\n      <\/div>\r\n      <div style=\"background-color: #000;margin-left: 4px;\">\r\n         <img decoding=\"async\" src=\"https:\/\/dubailand.gov.ae\/media\/tlnbg3zp\/retail-awards-260.jpg\" style=\"position: relative;top: -100px;\" \/>\r\n         <h1 style=\"position: relative;top: -50px;text-align:center;\">Dubai Land Department Wins Real Estate Asia Awards 2023\r\n         <\/h1>\r\n         <h3><i>Dubailand.gov.ae<\/i><\/h3>\r\n      <\/div>\r\n      <div style=\"background-color: #000;margin-left: 4px;\">\r\n         <img decoding=\"async\" src=\"https:\/\/cloud.famproperties.com\/fam\/blog\/693-104802.jpg\" style=\"position: relative;top: -100px;\" \/>\r\n         <h1 style=\"position: relative;top: -50px;text-align:center;\">DQ2 2023: Nearly 7,500 Newly Completed Properties in Dubai\r\n         <\/h1>\r\n         <h3><i>dxbinteract.com<\/i><\/h3>\r\n      <\/div>\r\n   <\/div>\r\n   <div class=\"right-slide\">\r\n      <div>\r\n         <div id=\"player\"><\/div>\r\n      <\/div>\r\n      <div>\r\n         <div id=\"player1\"><\/div>\r\n      <\/div>\r\n      <div >\r\n         <div id=\"player2\"><\/div>\r\n      <\/div>\r\n      <div >\r\n         <div id=\"player3\"><\/div>\r\n      <\/div>\r\n   <\/div>\r\n   <div class=\"action-buttons\">\r\n      <button class=\"down-button\"><i class=\"fas fa-arrow-down\"><\/i><\/button>\r\n      <button class=\"up-button\"><i class=\"fas fa-arrow-up\"><\/i><\/button>\r\n   <\/div>\r\n<\/div>\r\n<style>\r\n   @import url(\"https:\/\/fonts.googleapis.com\/css?family=Open+Sans\");\r\n   * {\r\n   box-sizing: border-box;\r\n   margin: 0;\r\n   padding: 0;\r\n   }\r\n   body {\r\n   font-family: \"Open Sans\", sans-serif;\r\n   height: 100vh;\r\n   }\r\n   .slider-container {\r\n   position: relative;\r\n   overflow: hidden;\r\n   width: 100vw;\r\n   height: 100vh;\r\n   }\r\n   .left-slide {\r\n   height: 100%;\r\n   width: 35%;\r\n   position: absolute;\r\n   top: 0;\r\n   left: 0;\r\n   transition: transform 0.5s ease-in-out;\r\n   }\r\n   .left-slide > div {\r\n   height: 100%;\r\n   width: 100%;\r\n   display: flex;\r\n   flex-direction: column;\r\n   align-items: center;\r\n   justify-content: center;\r\n   color: white;\r\n   }\r\n   .left-slide h1 {\r\n   font-size: 40px;\r\n   margin-bottom: 10px;\r\n   margin-top: -30px;\r\n   }\r\n   .right-slide {\r\n   height: 100%;\r\n   position: absolute;\r\n   top: 0;\r\n   left: 35%;\r\n   width: 65%;\r\n   transition: transform 0.5s ease-in-out;\r\n   }\r\n   .right-slide > div {\r\n   background-repeat: no-repeat;\r\n   height: 100%;\r\n   width: 100%;\r\n   background-size: cover;\r\n   background-position: center center;\r\n   }\r\n   button {\r\n   background-color: white;\r\n   border: none;\r\n   color: #aaa;\r\n   cursor: pointer;\r\n   padding: 15px;\r\n   }\r\n   button:hover {\r\n   color: #222;\r\n   }\r\n   button:focus {\r\n   outline: none;\r\n   }\r\n   .slider-container .action-buttons button {\r\n   position: absolute;\r\n   left: 35%;\r\n   top: 35%;\r\n   z-index: 100;\r\n   }\r\n   .slider-container .action-buttons .down-button {\r\n   transform: translateX(-100%);\r\n   border-radius: 5px 0 0 5px;\r\n   }\r\n   .slider-container .action-buttons .up-button {\r\n   transform: translateY(-100%);\r\n   border-radius: 0 5px 5px 0;\r\n   }\r\n   h1{\r\n   color: white !important;\r\n   font-size: 50px !important;\r\n   }\r\n   h3{\r\n   color: white !important;\r\n   }\r\n<\/style>\r\n<script>\r\n   var tag = document.createElement('script');\r\n   tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\r\n   \r\n   var fScriptTag = document.getElementsByTagName('script')[0];\r\n   fScriptTag.parentNode.insertBefore(tag, fScriptTag);\r\n       \r\n       function onYouTubeIframeAPIReady() {\r\n           createPlayer();   \r\n       }\r\n         \r\n       function createPlayer() {\r\n           return new YT.Player('player', {\r\n              height: \"100%\",\r\n              width: \"100%\",\r\n              videoId: \"SPdcWNSdHgQ\",\r\n              playerVars: {\r\n                 autoplay: 1,\r\n                 mute: 1,\r\n                 vq: 'hd1080',\r\n             },\r\n             events: {\r\n                 'onStateChange': onPlayerStateChange\r\n             }\r\n         });\r\n       }\r\n   \r\n   \/\/ when video ends\r\n   function onPlayerStateChange(event) {\r\n       if (event.data == 0){\r\n           \r\n           changeSlide('up');\r\n           createPlayer1();\r\n       }\r\n   }\r\n   \r\n   function createPlayer1() {\r\n       return new YT.Player('player1', {\r\n          height: \"100%\",\r\n          width: \"100%\",\r\n          videoId: \"ScT-WjYdUpc\",\r\n          playerVars: {\r\n             autoplay: 1,\r\n             mute: 1,\r\n             vq: 'hd1080',\r\n         },\r\n         events: {\r\n             'onStateChange': onPlayerStateChange1\r\n         }\r\n     });\r\n   }\r\n   \r\n   function onPlayerStateChange1(event) {\r\n       if (event.data == 0){\r\n           changeSlide('up');\r\n           \r\n           createPlayer2();\r\n       }\r\n   }\r\n   \r\n   function createPlayer2() {\r\n       return new YT.Player('player2', {\r\n          height: \"100%\",\r\n          width: \"100%\",\r\n          videoId: \"M36Xqtsz6rQ\",\r\n          playerVars: {\r\n             autoplay: 1,\r\n             mute: 1,\r\n             vq: 'hd1080',\r\n         },\r\n         events: {\r\n             'onStateChange': onPlayerStateChange2\r\n         }\r\n     });\r\n   }\r\n   \r\n   function onPlayerStateChange2(event) {\r\n       if (event.data == 0){\r\n           \r\n           changeSlide('up');\r\n           createPlayer3();\r\n       }\r\n   }\r\n   \r\n   function createPlayer3() {\r\n       return new YT.Player('player3', {\r\n          height: \"100%\",\r\n          width: \"100%\",\r\n          videoId: \"M36Xqtsz6rQ\",\r\n          playerVars: {\r\n             autoplay: 1,\r\n             mute: 1,\r\n             vq: 'hd1080',\r\n         },\r\n         events: {\r\n             'onStateChange': onPlayerStateChange3\r\n         }\r\n     });\r\n   }\r\n   \r\n   function onPlayerStateChange3(event) {\r\n       if (event.data == 0){\r\n           \r\n           changeSlide('up');\r\n           createPlayer4();\r\n       }\r\n   }\r\n   \r\n   function createPlayer4() {\r\n       return new YT.Player('player', {\r\n          height: \"100%\",\r\n          width: \"100%\",\r\n          videoId: \"-cYKv_Tsbxw\",\r\n          playerVars: {\r\n             autoplay: 1,\r\n             mute: 1,\r\n             vq: 'hd1080',\r\n         },\r\n         events: {\r\n             'onStateChange': onPlayerStateChange\r\n         }\r\n     });\r\n   }\r\n   \r\n   const sliderContainer = document.querySelector('.slider-container');\r\n   const slideRight = document.querySelector('.right-slide');\r\n   const slideLeft = document.querySelector('.left-slide');\r\n   const upButton = document.querySelector('.up-button');\r\n   const downButton = document.querySelector('.down-button');\r\n   const slidesLength = 3;\r\n   \r\n   \r\n   let activeSlideIndex = 0;\r\n   \r\n   slideLeft.style.top = `-${((slidesLength - 1) * 100)}vh`\r\n   \r\n   upButton.addEventListener('click', () => changeSlide('up'))\r\n   downButton.addEventListener('click', () => changeSlide('down'))\r\n   \r\n   const changeSlide = (direction) => {\r\n       const sliderHeight = sliderContainer.clientHeight;\r\n       if (direction === 'up') {\r\n           activeSlideIndex++\r\n           if(activeSlideIndex > slidesLength -1) {\r\n               activeSlideIndex = 0;\r\n           }   \r\n       } else {\r\n           activeSlideIndex--\r\n           if(activeSlideIndex < 0) {\r\n               activeSlideIndex = slidesLength -1;\r\n           }  \r\n       }\r\n       slideRight.style.transform = `translateY(-${sliderHeight * activeSlideIndex}px)`\r\n       slideLeft.style.transform = `translateY(${sliderHeight * activeSlideIndex}px)`\r\n   \r\n   }\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dubai Land Department, Dubai Development Authority strengthen cooperation to fulfil strategic objective of the emirate Dubailand.gov.ae Dubai Land Department Unveils Incentive Benefits of Real Estate Investment Trusts Inviting Eligible Companies to Register Dubailand.gov.ae Dubai Land Department Wins Real Estate Asia Awards 2023 Dubailand.gov.ae DQ2 2023: Nearly 7,500 Newly Completed Properties in Dubai dxbinteract.com<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-633","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/local.casttio.com\/index.php\/wp-json\/wp\/v2\/pages\/633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/local.casttio.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/local.casttio.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/local.casttio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/local.casttio.com\/index.php\/wp-json\/wp\/v2\/comments?post=633"}],"version-history":[{"count":430,"href":"https:\/\/local.casttio.com\/index.php\/wp-json\/wp\/v2\/pages\/633\/revisions"}],"predecessor-version":[{"id":1079,"href":"https:\/\/local.casttio.com\/index.php\/wp-json\/wp\/v2\/pages\/633\/revisions\/1079"}],"wp:attachment":[{"href":"https:\/\/local.casttio.com\/index.php\/wp-json\/wp\/v2\/media?parent=633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}