{"id":8302,"date":"2022-12-12T09:35:48","date_gmt":"2022-12-12T00:35:48","guid":{"rendered":"https:\/\/lginnotek-virtualshowroom.com\/?page_id=8302"},"modified":"2024-03-06T17:08:23","modified_gmt":"2024-03-06T08:08:23","slug":"intro-teaser","status":"publish","type":"page","link":"https:\/\/lginnotek-virtualshowroom.com\/","title":{"rendered":"Intro Teaser"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8302\" class=\"elementor elementor-8302\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-47d2ddb3 elementor-section-full_width elementor-section-height-min-height elementor-section-items-top elementor-section-height-default\" data-id=\"47d2ddb3\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-64b8df45\" data-id=\"64b8df45\" data-element_type=\"column\">\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-7f855116 elementor-widget elementor-widget-html\" data-id=\"7f855116\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<meta name=\"viewport\"\n\t\tcontent=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=yes\">\n<meta name=\"mobile-web-app-capable\" content=\"yes\">\n<meta name=\"apple-mobile-web-app-capable\" content=\"yes\">      <style id='script-62b50cf6e1018-css' type='text\/css'>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap');\r\n\r\n#lg-video #main-vr-skip {\r\n    font-size: 1.5vw;\r\n    padding: 0.5vw 1.9vw 0.8vw;\r\n    background-color: #6b6b6b;\r\n    line-height: 2vw;\r\n    max-height: none;\r\n    font-family: 'Segoe UI';\r\n    font-weight: bold;\r\n    color: #fff;\r\n    border-radius: 0.5vw;\r\n    max-width: unset;\r\n    text-transform: capitalize;\r\n    margin-right: 1.2vw;\r\n}\r\n.mainVideo{\r\n  width: 100%;\r\n  max-width: 100%;\r\n  height: auto;\r\n}\r\n\r\n.tset_video{\r\n  width: 100%;\r\n  max-width: 100%;\r\n  height: auto;\r\n}\r\n\r\n#setting{\r\n  display: flex;\r\n  position: fixed;\r\n  bottom: 1vw;\r\n  right: 1vw;\r\n  z-index: 800;\r\n}\r\n\r\n\r\n#lg-video .selectLanguage {\r\n  z-index: 1200;\r\n  position: fixed;\r\n  BOTTOM: 6vw;\r\n  right: 20px;\r\n  padding: 3vw;\r\n  background-color: rgb(54 54 54 \/ 90%);\r\n  border-radius: 10px;\r\n}\r\n\r\n\/* subtitle *\/\r\n#lg-video .subtitle {\r\n    width: auto;\r\n    position: fixed;\r\n    left: 50%;\r\n    color: #ffffff;\r\n    font-size: 25px;\r\n    text-align: center;\r\n    transform: translate(-50%, 0);\r\n    opacity: 1;\r\n    z-index: 900;\r\n    min-width: calc(50vw);\r\n}\r\n\r\n#lg-video .subtitle > p {\r\n    display: inline-block;\r\n    padding: 7px 0 10px;\r\n    background-color: rgba(0, 0, 0, 0.3);\r\n    line-height: 1.1;\r\n    letter-spacing: -0.5px;\r\n    margin: 0;\r\n    border-radius: 10px;\r\n    font-weight: bold;\r\n    width: 100%;\r\n    font-family: \"Segoe UI\",'Noto Sans SC','lg-smart';\r\n}\r\n\r\n#lg-video #mainVideo{\r\n  z-index: 800;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: auto;\r\n  background-color: #333333;\r\n}\r\n\r\n#lg-video #mainVideo::before {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 180px;\r\n  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));\r\n  content: '';\r\n  pointer-events: none;\r\n  z-index: 10;\r\n}\r\n\r\n.subtitles-menu {\r\n    display:none;\r\n    position:absolute;\r\n    bottom:14.8%;\r\n    right:20px;\r\n    background:#666;\r\n    list-style-type:none;\r\n    margin:0;\r\n    padding:0;\r\n    width:100px;\r\n    padding:10px;\r\n}\r\n\r\n.subtitles-menu li {\r\n    padding:0;\r\n    text-align:center;\r\n}\r\n\r\n.subtitles-menu li button {\r\n    border:none;\r\n    background:#000;\r\n    color:#fff;\r\n    cursor:pointer;\r\n    width:90%;\r\n    padding:2px 5px;\r\n    border-radius:2px;\r\n}\r\n\r\n\r\ndiv#setting-skip > div {\r\n    display: flex;\r\n    position: fixed;\r\n    bottom: 1vw;\r\n    left: 1vw;\r\n    z-index: 800;\r\n    align-items: center;\r\n}\r\n\r\n#lg-video .setting-skip button, #lg-video .setting button {\r\n    padding: 0px;\r\n    border: none;\r\n    margin-right: 0.6vw;\r\n    height: auto;\r\n    max-height: 3vw;\r\n    vertical-align: bottom;\r\n    max-width: 3vw;\r\n} \r\n\r\nbutton {\r\n    background-color: transparent;\r\n}\r\n\r\nbutton img {\r\n    width: 100%;\r\n}\r\n\r\n#lg-video .setting button#setBtn {\r\n    margin-right: 0;\r\n}\r\n\r\ndiv#selectLanguage div {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\ndiv#selectLanguage div p {\r\n    margin-bottom: 0px;\r\n    font-size: 1.7vw;\r\n    color: #fff;\r\n    font-weight: 700;\r\n    min-width: 9.5vw;\r\n    font-family: 'lg-smart'!important;\r\n    margin-top: 0px;\r\n}\r\n\r\ndiv#selectLanguage div ul#languageList {\r\n    display: flex;\r\n    list-style: none;\r\n    padding: 0;\r\n    gap: 4px;\r\n    margin: 0;\r\n}\r\n\r\nul#languageList li button {\r\n    padding: 0.5vw 1vw;\r\n    font-size: 1.3vw;\r\n    line-height: 1.3vw;\r\n    border-radius: 30px;\r\n    color: #fff;\r\n    border: none;\r\n    max-width: unset;\r\n    max-height: unset;\r\n    width: 100%;\r\n    margin-right: 4px;\r\n    margin-top: 0.2vw;\r\n    font-weight: 500;\r\n}\r\n\r\nul#languageList li button.on {\r\n    background-color: #a51c35;\r\n}\r\n\r\ndiv#selectLanguage button#sbtBtn {\r\n    border: none;\r\n    max-width: unset;\r\n    max-height: unset;\r\n    width: 5.5vw;\r\n    height: 2.3vw;\r\n    padding: 0;\r\n    text-align: left;\r\n    font-size: 0px;\r\n    background-image: url(\/wp-content\/uploads\/2022\/06\/ON.png);\r\n    background-size: 100%;\r\n    background-repeat: no-repeat;\r\n}\r\n\r\ndiv#selectLanguage button#sbtBtn.off {\r\n    background-image: url(\/wp-content\/uploads\/2022\/06\/OFF.png);\r\n}\r\n\r\nul#languageList li button:hover, ul#languageList li button.EN {\r\n    background-color: #a51c35;\r\n}\r\n\r\ndiv#selectLanguage div:nth-child(1) {\r\n    margin-bottom: 1vw;\r\n}\r\n\r\n.elementor-button-icon.replay svg {\r\n    width: 0.6em;\r\n    height: auto;\r\n}\r\n\r\ndiv#selectLanguage button#closeBtn {\r\n    width: 21px;\r\n    position: absolute;\r\n    top: 1vw;\r\n    right: 1vw;\r\n    border: none;\r\n    max-width: unset;\r\n    max-height: unset;\r\n    padding: 0;\r\n    text-align: left;\r\n}\r\n\r\n@media screen and (max-width: 1199px) and (orientation: landscape) {\r\n    #lg-video .subtitle {\r\n        font-size: 2vw;\r\n        line-height: 1.2;\r\n    }\r\n    #lg-video .subtitle > p {\r\n        padding: 5px 10px;\r\n        width: 100%;\r\n        border-radius: 10px;\r\n    }\r\n    \r\n    div#selectLanguage button#closeBtn {\r\n        width: 2vw;\r\n    }\r\n\r\n    div#selectLanguage button#sbtBtn {\r\n        height: 2.3vw;\r\n        background-position: bottom;\r\n    }\r\n    div#selectLanguage div p {\r\n        margin-top: 0px;\r\n    }\r\n    div#selectLanguage div:nth-child(2) p {\r\n        margin-top: 6px;\r\n    }\r\n}\r\n\r\n@media (min-width: 1680px) {\r\n    #lg-video .setting-skip button, #lg-video .setting button {\r\n        margin-right: 13px;\r\n        max-height: 46px;\r\n        vertical-align: bottom;\r\n        max-width: 46px;\r\n    }\r\n    #lg-video #main-vr-skip {\r\n        font-size: 20px;\r\n        padding: 13px 30px 13px;\r\n        background-color: #6b6b6b;\r\n        line-height: 20px;\r\n        border-radius: 10px;\r\n        margin-right: 20px;\r\n    }\r\n    div#selectLanguage div p {\r\n        font-size: 21px;\r\n        min-width: 104px;\r\n        line-height: 21px;\r\n    }\r\n\r\n    #lg-video .selectLanguage {\r\n        padding: 33px 34px;\r\n        bottom: 98px;\r\n    }\r\n\r\n    div#selectLanguage button#sbtBtn {\r\n        width: 81px;\r\n        height: 34px;\r\n    }\r\n\r\n    ul#languageList li button {\r\n        font-size: 17px;\r\n        padding: 10px 13px;\r\n        line-height: 17px;\r\n    }\r\n    \r\n    div#selectLanguage div:nth-child(1) {\r\n        margin-bottom: 13px;\r\n    }\r\n}\n<\/style>\n\n      <div id=\"lg-video\">\n    <!-- \ube44\ub514\uc624 -->\n    <!-- <video class=\"door_video\" id=\"door_video\" width=\"100%\" height=\"100%\" controlslist=\"nodownload\" disablepictureinpicture autoplay controls loop muted> -->\n      <video class=\"\" id=\"mainVideo\"  autoplay=\"\" muted=\"\" playsinline=\"\" data-wf-ignore=\"true\" data-object-fit=\"cover\">\n        <source src=\"https:\/\/storage.googleapis.com\/lginnotek\/virtualshowroom\/intro_main_20240306.mp4\">\n        <\/video>\n        <\/div> \n      <script src=\"https:\/\/code.jquery.com\/jquery-1.12.4.min.js\"><\/script> \r\n<script>\r\n\/* subtitle *\/\r\n$(document).ready(function() {\r\n  var video = document.getElementById(\"mainVideo\");  \r\n  var tracks = video.textTracks; \/\/\ub4f1\ub85d\ub41c \uc804\uccb4 tracklist\r\n  var subtitle = document.getElementById(\"subtitle\");\r\n  var languageList = document.querySelector('#languageList')\r\n  var languages = [];     \/\/language select div \uc0dd\uc131\uc744 \uc704\ud55c \ubc30\uc5f4 \uc0dd\uc131\r\n  var fragment = new DocumentFragment();   \r\n  var language = \"\"; \/\/\ud604\uc7ac \uc5b8\uc5b4\r\n\r\n  \/\/\uc5b8\uc5b4 \uc120\ud0dd \ud31d\uc5c5 \uc0dd\uc131\uc744 \uc704\ud55c \ubc30\uc5f4, \uc804\uccb4 \uc790\ub9c9 hidden\uc73c\ub85c \ucd08\uae30\ud654\r\n  for(i=0; i<tracks.length; i++){\r\n    languages.push(tracks[i].label);\r\n    if(tracks[i].label == 'EN'){\r\n      tracks[i].mode = 'hidden'; \r\n    } else {\r\n      tracks[i].mode = 'disabled'; \r\n    }              \r\n  }       \r\n  setSubtitle(); \/\/ \uc790\ub9c9 \uc5b8\uc5b4\uc124\uc815 \r\n  subtitlePosition ();\/\/\uc790\ub9c9\uc704\uce58\r\n  \r\n  languages.forEach(function (language) {\r\n    var li = document.createElement('li');\r\n    li.innerHTML = \"<button class='\"+language+\"' id='\"+language+\"' name='\"+language+\"' onClick='changeLanguages(\\\"\"+ language +\"\\\")'>\"+language+\"<\/button>\"; \r\n    fragment.appendChild(li);      \r\n  });\r\n  languageList.appendChild(fragment);\r\n  document.getElementById('EN').className = 'on';\r\n  document.getElementById('KR').className = 'off';\r\n  document.getElementById('CN').className = 'off';\r\n});\r\n\r\nvar subtitle_status = \"true\";\r\nfunction setSubtitle(){\r\n  console.log(subtitle_status);\r\n  var video = document.getElementById(\"mainVideo\");\r\n  var subtitle = document.getElementById('subtitle');\r\n  var tracks = video.textTracks; \/\/\ub4f1\ub85d\ub41c \uc804\uccb4 tracklist\r\n  var track = video.textTracks[0]; \/\/\uc120\ud0dd\ub41c \uc5b8\uc5b4\uc815\ubcf4 \ucd08\uae30\uac12\uc740 \uad6d\ubb38\r\n  var cue = video.textTracks[0];   \r\n  for(i=0; i<tracks.length; i++){\r\n    \/\/tracks[i].mode = 'showing'; \r\n    if(tracks[i].mode == 'hidden'){\r\n      track = video.textTracks[i];\r\n    }\r\n    track.oncuechange = function(e){      \r\n      cue = track.activeCues[0];\r\n      if(cue && subtitle_status == 'true'){\r\n        subtitle.style.display = \"block\";       \r\n        $(\".subtitle > p\").text(cue.text);   \r\n      }      \r\n    }                   \r\n  } \r\n}\r\n\/**************************************************************************\/\r\n\r\n\/* playBtn function *\/\r\n$('#playBtn').click(function(){ \r\n  var video = document.getElementById(\"mainVideo\");\r\n  var playBtn = document.getElementById(\"playBtn\");\r\n  if (video.paused) {\r\n    video.play();\r\n    playBtn.innerHTML = '<img decoding=\"async\" src=\"https:\/\/lginnotek-virtualshowroom.com\/wp-content\/uploads\/2022\/06\/pause.png\">';\r\n  } else {\r\n    video.pause();\r\n    playBtn.innerHTML = '<img decoding=\"async\" src=\"https:\/\/lginnotek-virtualshowroom.com\/wp-content\/uploads\/2022\/06\/play.png\">';\r\n  }\r\n});\r\n\r\n\/* muteBtn_main function *\/\r\n$('#muteBtn_main').click(function(){ \r\n  var video = document.getElementById(\"mainVideo\");\r\n  var mute_status = video.muted;\r\n      \r\n  if(mute_status) {\r\n    console.log(mute_status);\r\n    video.muted = false;\r\n    document.getElementById(\"mute_img\").src\r\n = \"https:\/\/lginnotek-virtualshowroom.com\/wp-content\/uploads\/2022\/06\/mute-true.png\";\r\n  } else {\r\n    console.log(mute_status);\r\n    video.muted = true;\r\n    document.getElementById(\"mute_img\").src\r\n = \"https:\/\/lginnotek-virtualshowroom.com\/wp-content\/uploads\/2022\/06\/mute.png\";\r\n  }\r\n});\r\n\r\n\/* muteBtn_serve function *\/\r\n$('#muteBtn_serve').click(function(){ \r\n  var video = document.getElementById(\"mainVideo\");\r\n  var mute_status = video.muted;\r\n  if(mute_status) {\r\n    video.muted = false;\r\n  } else {\r\n    video.muted = true;\r\n  }\r\n});\r\n\r\n\/* muteBtn_serve function *\/\r\n$('#restartBtn').click(function(){ \r\n  var video = document.getElementById(\"mainVideo\");\r\n  video.pause();\r\n  video.currentTime = '0';\r\n  video.play();\r\n});\r\n\r\n\/* subtitle on\/off function *\/\r\n$('#sbtBtn').click(function(){ \r\n  var subtitle = document.getElementById('subtitle');\r\n  if(subtitle.style.display == \"none\"){\r\n    subtitle.style.display = \"block\";\r\n    document.getElementById('sbtBtn').className = 'on';\r\n    subtitle_status = \"true\"\r\n  } else {\r\n    subtitle.style.display = \"none\";\r\n    document.getElementById('sbtBtn').className = 'off';\r\n    subtitle_status = \"false\"\r\n  }  \r\n  console.log(subtitle_status);          \r\n});\r\n\r\n\/* subtitle setting function *\/\r\n$('#setBtn').click(function(){ \r\n  var language = document.getElementById('selectLanguage');\r\n  if(language.style.display == \"none\"){\r\n    language.style.display = \"block\";   \r\n  } else {\r\n    language.style.display = \"none\";\r\n  }            \r\n});\r\n\r\n\/* setting close function *\/\r\n$('#closeBtn').click(function(){ \r\n  var language = document.getElementById('selectLanguage');\r\n  language.style.display = \"none\";           \r\n});\r\n\r\n\r\n\/* select Language *\/\r\nfunction changeLanguages(lang){\r\n  var video = document.getElementById(\"mainVideo\");  \r\n  var tracks = video.textTracks; \/\/\ub4f1\ub85d\ub41c \uc804\uccb4 tracklist\r\n  \r\n  for(i=0; i<tracks.length; i++){\r\n      \/\/tracks[i].mode = 'showing'; \r\n      if(tracks[i].label == lang){\r\n        tracks[i].mode = 'hidden';\r\n        document.getElementById(tracks[i].label).className = 'on';\r\n      } else {\r\n        tracks[i].mode = 'disabled';\r\n        document.getElementById(tracks[i].label).className = 'off';\r\n      }                         \r\n    }   \r\n  setSubtitle();\r\n} \r\n\r\nfunction subtitlePosition () {\r\n  var w_w = $(window).width();\r\n  var w_h = $(window).height();\r\n  var v_h = w_w * 0.5625;\r\n\r\n    var result = ( v_h > w_h ) ? 20 : w_h - v_h + 15;\r\n\r\n    \/\/var result = ( v_h > w_h ) ? true : false\r\n    $(\".subtitle\").css(\"bottom\", result);\r\n}\r\n\r\n$(window).on(\"resize\", function() {\r\n  subtitlePosition ();\r\n});\r\n\r\n\r\n<\/script> \n      <script src=\"https:\/\/code.jquery.com\/jquery-1.12.4.min.js\"><\/script>\n\n      <script>\n        var vdo= document.getElementById(\"mainVideo\");\n        vdo.onended = function() {\n          parent.window.location.href = '\/main-vr\/'\n        };\n      <\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-42d5430 elementor-align-center elementor-fixed skip-btn elementor-widget elementor-widget-button\" data-id=\"42d5430\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;fixed&quot;}\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"\/main-vr\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-text\">Discover Now<\/span>\n\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t<\/div>\n\t\t\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>Discover Now<\/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":""},"_links":{"self":[{"href":"https:\/\/lginnotek-virtualshowroom.com\/wp-json\/wp\/v2\/pages\/8302"}],"collection":[{"href":"https:\/\/lginnotek-virtualshowroom.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lginnotek-virtualshowroom.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lginnotek-virtualshowroom.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lginnotek-virtualshowroom.com\/wp-json\/wp\/v2\/comments?post=8302"}],"version-history":[{"count":34,"href":"https:\/\/lginnotek-virtualshowroom.com\/wp-json\/wp\/v2\/pages\/8302\/revisions"}],"predecessor-version":[{"id":9486,"href":"https:\/\/lginnotek-virtualshowroom.com\/wp-json\/wp\/v2\/pages\/8302\/revisions\/9486"}],"wp:attachment":[{"href":"https:\/\/lginnotek-virtualshowroom.com\/wp-json\/wp\/v2\/media?parent=8302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}