카페24 쇼핑몰 제작, 유튜브 공유 퍼가기

2020-10-10 작성 2024-04-08 수정

상품상세정보, 게시판에 유튜브 반응형으로 삽입

상품 상세 정보와 게시판 글보기 내용에 삽입되는 유튜브 영상의 경우 스마트폰 (모바일) 화면의 가로 사이즈에 맞게 자동 조정되어야 합니다.
아래 자바스크립트 코드를 해당 페이지에 적용되는 .js 파일에 삽입합니다.

상품 상세 페이지

$(document).ready(function() {
    var youtube_area_w = $('.xans-product-additional #prdDetail').width();
    var w = $('.xans-product-additional #prdDetail iframe').attr('width');
    var h = $('.xans-product-additional #prdDetail iframe').attr('height');
    var w_h_rate = w / h;
    $('.xans-product-additional #prdDetail iframe').css({'width':youtube_area_w,'height':youtube_area_w / w_h_rate})
});

게시판 글보기 페이지

$(document).ready(function(){
    var youtube_area_w = $('.boardView .content').width();
    var w = $('.boardView .content iframe').attr('width');
    var h = $('.boardView .content iframe').attr('height');
    var w_h_rate = w / h;
    $('.boardView .content iframe').css({'width':youtube_area_w,'height':youtube_area_w / w_h_rate})
});