gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

인트로 유튜브로 수정

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2024-08-05 22:16:18 +09:00
parent d693f7e152
commit fcc90fcddf
7 changed files with 88 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
assets/css/pdp_detail.css
View File

@@ -3022,25 +3022,20 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 80%; width: 80%;
max-width: 120rem; max-width: 120rem;
padding-top: 43.5%; aspect-ratio: 16/9;
} }
.editorWarp .video_wrap .video-area .video { .editorWarp .video_wrap .video-area .video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%; width: 100%;
height: 100%;
background: #000; background: #000;
} }
.editorWarp .video_wrap .video-area .video video { .editorWarp .video_wrap .video-area .video .youtube-box {
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
visibility: visible;
} }
.editorWarp .video_wrap .video-area .video video[poster] { .editorWarp .video_wrap .video-area .video iframe {
height: 100%;
width: 100%; width: 100%;
height: 100%;
} }
.editorWarp .video_wrap .video-area .video .btn-play { .editorWarp .video_wrap .video-area .video .btn-play {
position: absolute; position: absolute;
@@ -3104,6 +3099,7 @@
position: absolute; position: absolute;
top: -4rem; top: -4rem;
right: -16rem; right: -16rem;
z-index: 10;
width: 14rem; width: 14rem;
height: 14rem; height: 14rem;
background-color: transparent; background-color: transparent;

2
assets/css/pdp_detail.css.map
View File

File diff suppressed because one or more lines are too long

32
assets/css/pdp_detail.scss
View File

@@ -3450,28 +3450,35 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 80%; width: 80%;
max-width: 120rem; max-width: 120rem;
padding-top: 43.5%; aspect-ratio: 16/9;
.video { .video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%; width: 100%;
height: 100%;
background: #000; background: #000;
// aspect-ratio: 16/9;
video { .youtube-box {
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
visibility: visible; }
&[poster] { iframe {
height: 100%;
width: 100%; width: 100%;
height: 100%;
} }
}
// video {
// display: block;
// width: 100%;
// height: 100%;
// visibility: visible;
// &[poster] {
// height: 100%;
// width: 100%;
// }
// }
// .video-ctrl { // .video-ctrl {
// display: flex; // display: flex;
@@ -3555,6 +3562,7 @@
position: absolute; position: absolute;
top: -4rem; top: -4rem;
right: -16rem; right: -16rem;
z-index: 10;
width: 14rem; width: 14rem;
height: 14rem; height: 14rem;
background-color: transparent; background-color: transparent;

75
assets/js/common.js
View File

@@ -712,19 +712,19 @@ $(document).on("click", ".displayTheme .dtthumb", function () {
function pdpIntro() { function pdpIntro() {
// dpThemeVideo 요소가 존재하는지 확인 // dpThemeVideo 요소가 존재하는지 확인
if ($(".video_wrap video").length > 0) { if ($(".video_wrap").length > 0) {
// .video_wrap 내 모든 비디오 요소 선택 // .video_wrap 내 모든 비디오 요소 선택
const videoElements = document.querySelectorAll(".video_wrap video"); const videoElements = document.querySelectorAll(".video_wrap video");
let cookieVal; let cookieVal;
$(".editorWarp").addClass("playing"); $(".editorWarp").addClass("playing");
const youtubeId = $('.youtube-box').data('youtube');
const youtubeFrame = '<iframe src="https://www.youtube.com/embed/'+youtubeId+'?autoplay=1&controls=1&rel=0&showsearch=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
$('.editorWarp .youtube-box').html(youtubeFrame);
switch (true) { switch (true) {
case $(".displayTheme").length > 0: case $(".displayTheme").length > 0:
cookieVal = "displayThemeIntro"; cookieVal = "displayThemeIntro";
$(".video_wrap video").attr(
"poster",
"../assets/images/kia/pdp/display_theme/intro_poster.png"
);
break; break;
case $(".inCarGame").length > 0: case $(".inCarGame").length > 0:
cookieVal = "inCarGameIntro"; cookieVal = "inCarGameIntro";
@@ -746,27 +746,56 @@ function pdpIntro() {
`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>` `<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
); );
$(".btn-intro").css("display", "flex"); $(".btn-intro").css({"display":"flex","opacity":"0", "top":"8rem"}).animate({"opacity":"1", "top":"5rem"},400);
if (getCookie(cookieVal)) { if (getCookie(cookieVal)) {
$(".editorWarp").removeClass("playing"); $(".editorWarp").removeClass("playing");
$(".video_wrap").css("display", "none"); $(".video_wrap").css("display", "none");
$(".close-today input").attr("checked", "checked"); $(".close-today input").attr("checked", "checked");
videoElements[0].pause(); // videoElements[0].pause();
videoElements[0].currentTime = 0; // videoElements[0].currentTime = 0;
$(".close-today").html( $(".close-today").html(
`<span onclick="deleteCookie('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>` `<span onclick="deleteCookie('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
); );
} else { } else {
$(".video_wrap").css("display", "flex"); $(".video_wrap").css({"display":"flex","opacity":"0"}).animate({"opacity":"1"},200);
$(".close-today").html( $(".close-today").html(
`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>` `<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
); );
} }
videoElements.forEach((video) => {
const videoWrap = $(".editorWarp .video_wrap"); const videoWrap = $(".editorWarp .video_wrap");
// .btn-intro 버튼 클릭 시 비디오 재생
$(document).on("click", ".editorWarp .btn-intro", function () {
// console.log('intro 다시 실행');
$(".editorWarp").addClass("playing");
if (getCookie(cookieVal)) {
$(".close-today input").attr("checked", "checked");
}
$('.editorWarp .youtube-box').html(youtubeFrame);
$(videoWrap).show();
// if (video) {
// video.currentTime = 0;
// video.play();
// }
});
// .btn-close 버튼 클릭 시 비디오 숨기기
$(document).on("click", ".video_wrap .btn-close", function () {
console.log('btn close 실행');
$(".editorWarp").removeClass("playing");
$(videoWrap).hide();
$('.editorWarp .youtube-box').empty();
// if (video) {
// video.currentTime = 0;
// video.pause();
// }
});
/*
videoElements.forEach((video) => {
const btnIntro = $(".editorWarp .btn-intro"); const btnIntro = $(".editorWarp .btn-intro");
const btnClose = $(".video_wrap .btn-close"); const btnClose = $(".video_wrap .btn-close");
const btnPlay = $(".video_wrap .btn-play"); const btnPlay = $(".video_wrap .btn-play");
@@ -806,32 +835,8 @@ function pdpIntro() {
videoWrap.removeClass("paused"); videoWrap.removeClass("paused");
}); });
} }
// .btn-intro 버튼 클릭 시 비디오 재생
$(document).on("click", ".editorWarp .btn-intro", function () {
// console.log('intro 다시 실행');
$(".editorWarp").addClass("playing");
if (getCookie(cookieVal)) {
$(".close-today input").attr("checked", "checked");
}
$(videoWrap).show();
if (video) {
video.currentTime = 0;
video.play();
}
});
// .btn-close 버튼 클릭 시 비디오 숨기기
$(document).on("click", ".video_wrap .btn-close", function () {
// console.log('btn close 실행');
$(".editorWarp").removeClass("playing");
$(videoWrap).hide();
if (video) {
video.currentTime = 0;
video.pause();
}
});
}); });
*/
// 주석 처리된 부분: 버튼 클릭 시 비디오 숨기기 // 주석 처리된 부분: 버튼 클릭 시 비디오 숨기기
// $(btnClose).on('click', function() { // $(btnClose).on('click', function() {

18
product/pdp_display_theme_0429.html
View File

@@ -436,7 +436,7 @@
<div class="comp_body layer_up"> <div class="comp_body layer_up">
<div class="text_area"> <div class="text_area">
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"> <h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
응원하는 NBA팀의 테마를 차량 디스플레이에 적용해보세요 다채로운 NBA팀의 테마를 차량 디스플레이에 적용해보세요
</h3> </h3>
<div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"> <div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
아래의 로고를 눌러 미리 차량에 적용된 디자인을 확인 할 수 있습니다. 아래의 로고를 눌러 미리 차량에 적용된 디자인을 확인 할 수 있습니다.
@@ -587,16 +587,8 @@
<div class="comp_md layer_up video_wrap"> <div class="comp_md layer_up video_wrap">
<div class="video-area"> <div class="video-area">
<div class="video"> <div class="video">
<div class="youtube-box" data-youtube="TZAmmWX7Kwo"></div>
<video playsinline="playsinline" >
<source src="../assets/images/kia/pdp/display_theme/NBA_Display_Theme_Intro.mp4" type="video/mp4">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<div class="btn-close">닫기</div> <div class="btn-close">닫기</div>
<div class="video-ctrl">
<div class="btn-sound on">sound</div>
<div class="btn-play play">Play</div>
</div>
</div> </div>
</div> </div>
<div class="close-today"> <div class="close-today">
@@ -636,7 +628,7 @@
<div class="text_area"> <div class="text_area">
<h5>Navigation</h5> <h5>Navigation</h5>
<p> <p>
내비게이션의 각 메뉴 화면을 넘길 때 마다 특별한 NBA 팀 아이콘과 팀 칼라가 적용된 것을 확인할 수 있습니다.<br> 내비게이션의 각 메뉴 화면을 넘길 때 마다 특별한 NBA 팀 아이콘과 팀 칼라가 적용된 것을 확인할 수 있습니다.
스타일리쉬하고 특별한 운전 경험을 완성합니다. 스타일리쉬하고 특별한 운전 경험을 완성합니다.
</p> </p>
</div> </div>
@@ -648,7 +640,7 @@
<div class="text_area"> <div class="text_area">
<h5>Profile</h5> <h5>Profile</h5>
<p> <p>
응원하는 NBA팀의 로고와 칼라를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다.<br> NBA팀의 로고와 칼라를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다.<br>
운전자 별로 다른 이미지를 골라 보세요. 운전자 별로 다른 이미지를 골라 보세요.
</p> </p>
</div> </div>
@@ -748,7 +740,7 @@
<div class="listbtnWarp"> <div class="listbtnWarp">
<div class="oneButton"> <div class="oneButton">
<a href="https://connectstore.kia.com/kr/info/product-usage-guide-lighting"><p>사양 이용안내</p></a> <a href="https://connectstore.kia.com/kr/info/product-usage-guide-nba"><p>사양 이용안내</p></a>
</div> </div>
</div> </div>

12
product/pdp_in_car_game.html
View File

@@ -433,16 +433,8 @@
<div class="comp_md layer_up video_wrap"> <div class="comp_md layer_up video_wrap">
<div class="video-area"> <div class="video-area">
<div class="video"> <div class="video">
<div class="youtube-box" data-youtube="SBMjdXayjVo"></div>
<video playsinline="playsinline">
<source src="../assets/images/kia/pdp/in_car_game/intro.mp4" type="video/mp4">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<div class="btn-close">닫기</div> <div class="btn-close">닫기</div>
<div class="video-ctrl">
<div class="btn-sound on">sound</div>
<div class="btn-play play">Play</div>
</div>
</div> </div>
</div> </div>
<div class="close-today"> <div class="close-today">
@@ -590,7 +582,7 @@
ccNC 차량에 한하여 구매 가능 ccNC 차량에 한하여 구매 가능
</h5> </h5>
<p> <p>
해당 아이템은 12.5인치 ccNC 플랫폼 적용 차량에 한하여 구입 가능합니다. 차세대 인포테인먼트 시스템(ccNC) 장착 차량에 한하여 이용 가능합니다.
</p> </p>
</div> </div>
</div> </div>

28
product/pdp_srs_plus.html
View File

@@ -348,16 +348,8 @@
<div class="comp_md layer_up video_wrap"> <div class="comp_md layer_up video_wrap">
<div class="video-area"> <div class="video-area">
<div class="video"> <div class="video">
<div class="youtube-box" data-youtube="QTNIYFnfw_I"></div>
<video playsinline="playsinline">
<source src="../assets/images/kia/pdp/srs_plus/intro.mp4" type="video/mp4">
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<div class="btn-close">닫기</div> <div class="btn-close">닫기</div>
<div class="video-ctrl">
<div class="btn-sound on">sound</div>
<div class="btn-play play">Play</div>
</div>
</div> </div>
</div> </div>
<div class="close-today"> <div class="close-today">
@@ -377,8 +369,8 @@
</h4> </h4>
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800" class="aos-init aos-animate"> <p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800" class="aos-init aos-animate">
스마트 회생 시스템 플러스는 기존 스마트 회생 시스템 대비 내비게이션 연동 기능이 확대되었습니다. 스마트 회생 시스템 플러스는 기존 스마트 회생 시스템 대비 내비게이션 연동 기능이 확대되었습니다.
내비게이션과 연동 된 다양한 주행상황에서 자동으로 회생제동량을 조절하여 적절한 속도로 감속할 수 있으며, 내비게이션과 연동 된 다양한 주행상황에서 자동으로 회생제동량을 조절하여 적절한 속도로 감속할 수 있으며, 교통 체증 및 도심 주행에서의 브레이크 조작을 줄여주어,
교통 체증 및 도심 주행에서의 브레이크 조작을 줄여주어, 주행 중 피로를 덜어드립니다. 주행 중 피로를 덜어드립니다.
</p> </p>
</div> </div>
</div> </div>
@@ -403,8 +395,8 @@
<div class="text_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"> <div class="text_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<h4>교차로 자동 감속</h4> <h4>교차로 자동 감속</h4>
<p> <p>
교차로에서 좌/우회전 하는 경우 상황에 맞는 속도로 감속. 교차로에서 좌/우회전 하는 경우 상황에 맞는 속도로 감속합니다. 주행 중인 차선 개수(4차선 도로 등) 및 회전 각도에 따라
좌회전의 경우 내비 경로 설정 시, 주행 중인 차선 개수(4차선 도로 등)에 따라 감속 목표 속도가 달라짐 감속 목표 속도가 달라집니다.
</p> </p>
</div> </div>
</div> </div>
@@ -415,7 +407,7 @@
<div class="text_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"> <div class="text_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<h4>회전교차로 감속</h4> <h4>회전교차로 감속</h4>
<p> <p>
회전교차로 진입 직전에 적정 속도에 도달하게끔 자동 감속 회전교차로 진입 직전에 적정 속도에 도달하게끔 자동 감속 합니다.
</p> </p>
</div> </div>
</div> </div>
@@ -426,7 +418,7 @@
<div class="text_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"> <div class="text_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<h4>방지턱 자동 감속 [국내]</h4> <h4>방지턱 자동 감속 [국내]</h4>
<p> <p>
방지턱을 넘기 전에 적정 속도로 감속 방지턱을 넘기 전에 적정 속도로 감속 합니다.
</p> </p>
</div> </div>
</div> </div>
@@ -437,7 +429,7 @@
<div class="text_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"> <div class="text_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<h4>커브 도로 자동 감속</h4> <h4>커브 도로 자동 감속</h4>
<p> <p>
급한 커브 도로에서 적정 속도로 감속 급한 커브 도로에서 적정 속도로 감속 합니다.
</p> </p>
</div> </div>
</div> </div>
@@ -467,7 +459,9 @@
구매 가능 여부는 차종 별 상이 구매 가능 여부는 차종 별 상이
</h5> </h5>
<p> <p>
상품 구매 및 이용가능 여부는 차량 하드웨어 구성 및 제어기의 펌웨어 버전에 따라 상이할 수 있으며, 로그인 후 확인하실 수 있습니다.<br> 상품 구매 및 이용가능 여부는 차량 하드웨어 구성 및 제어기의 펌웨어 버전에 따라 상이할 수 있으며, 로그인 후 확인하실 수
있습니다.
<br>
(24년 7월 기준 EV3 차량에 구매 가능합니다.) (24년 7월 기준 EV3 차량에 구매 가능합니다.)
</p> </p>
</div> </div>