부스트 이용안내 수정 스텝02

product/pdp_boost.html

@@ -343,8 +343,9 @@
             </p>
         </div>
     </div>
-    <div class="image_area">
-        <img src="../assets/images/kia/pdp/boost/boost_contents_01.png" alt="부스트 비쥬얼 이미지" style="object-position:90% 50%;">
+    <div class="image_area visualBg">
+        <img src="../assets/images/kia/pdp/boost/boost_contents_01.png" class="web" alt="부스트 비쥬얼 이미지">
+        <img src="../assets/images/kia/pdp/boost/boost_contents_01_m.png" class="mobile" alt="부스트 비쥬얼 이미지">
     </div>
     <div class="bottom">
         <div class="comp_body">
@@ -446,16 +447,6 @@
     </div>
 </div>
 
-<div class="comp_1x_b_n_n_e1 inCarGame">
-    <div class="comp_body">
-        <h5>
-            사양 이용 영상
-        </h5>
-        <div class="youtubeArea youtubeArea_pdp" value="hc3GUWHzevA">
-        </div>
-    </div>
-</div>
-
 <div class="listbtnWarp">
     <div class="oneButton">
         <a href="https://connectstore.kia.com/kr/info/product-usage-guide-boost"><p>사양 이용안내</p></a>
@@ -658,6 +649,12 @@
         <!--//footer-->
         <script>
             AOS.init();
+
+            if($(".youtubeArea").hasClass("youtubeArea_pdp") === true) {
+                var youtube_id = $('.youtubeArea_pdp').attr('value');
+                var youtube_frame = '<iframe src="https://www.youtube.com/embed/'+youtube_id+'?controls=1&rel=0&showsearch=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
+                $('.youtubeArea_pdp').html(youtube_frame);
+            }
         </script>
     </body>
 </html>