여분필드로 유투브 연동하기 > 영카트5 팁자료실

버그신고

영카트5 팁자료실

여분필드로 유투브 연동하기 정보

여분필드로 유투브 연동하기

본문

쇼핑몰  상품등록시 유투브 주소를 입력하면 상품상세페이지에 유튜브를 나타내는 방법입니다

테마 또는 일반스킨의  item.form.skin.php  에다 원하는 곳에 다음과 같은 소스를 추가합니다.


<div style="margin:0 auto; max-width:720px">
<?php
$youtube_link = $it['it_1'];
if($youtube_link != ""){
$youtube_url = explode("/", $youtube_link);
$movieimg = "https://img.youtube.com/vi/".$youtube_url[3]."/maxresdefault.jpg"; 
echo '<div class="video-container"><iframe width="720" height="480" src="https://www.youtube.com/embed/'.$youtube_url[3].'?autoplay=1&mute=1"  frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';
}
?>
</div>



설명1. it_1  는 첫번째 여분필드를 의미합니다 
설명2. 보통  관리자페이지의 여분필드에  유투브주소를 입력하게 되면
        https://www.youtube.com/watch?v=aaaaaaaaa  이런식으로 입력되게 됩니다
        하지만 유투브 내보내기를 하면 https://www.youtube.com/embed/aaaaaaaaa  식으로 전환하게 되죠

그래서  explode("/", $youtube_link);  를 설정해서  유투브 주소에서  "/" 3번쨰 이후의 코드만 사용한다고 지정해 주면 됩니다.

'.$youtube_url[3].'  는 aaaaaaaaa  가 됩니다.


참고로
모바일에서 반응형 아이프레임을 접목시키려면

<style type="text/css">
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

추가하면 됩니다

그리고  ?autoplay=1&mute=1  는 자동재생을 위한 소스입니다
크롬 정책상 자동재생을 하려면 음소거를 해야만 자동재생됩니다
자동재생을 원하지 않으시면
해당소스를 지우면 됩니다
추천
4

댓글 7개

전체 346
영카트5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT