여분필드로 유투브 연동하기
쇼핑몰 상품등록시 유투브 주소를 입력하면 상품상세페이지에 유튜브를 나타내는 방법입니다
테마 또는 일반스킨의 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 는 자동재생을 위한 소스입니다
크롬 정책상 자동재생을 하려면 음소거를 해야만 자동재생됩니다
자동재생을 원하지 않으시면
해당소스를 지우면 됩니다
테마 또는 일반스킨의 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 는 자동재생을 위한 소스입니다
크롬 정책상 자동재생을 하려면 음소거를 해야만 자동재생됩니다
자동재생을 원하지 않으시면
해당소스를 지우면 됩니다
댓글 13개
저스트골프
4년 전
와우 좋은 정보 감사드립니다~~
4년 전
좋은 정보 감사 합니다.
유용하게 사용할 수 있을거 같습니다.
유용하게 사용할 수 있을거 같습니다.
아이스웨덴™
4년 전
좋은 정보 감사 합니다.
브러운아이
4년 전
좋은 정보네요 감사합니다.
4년 전
좋은 정보네요 감사합니다.
낙타1000
4년 전
좋은 정보 감사합니다.
4년 전
정보 감사합니다 ^^
4년 전
유용한 팁입니다!!
4년 전
감사합니다 혹시 자게 처럼 유투브 주소만 입력하면 아이프레임으로 변환되는 소스도 알려주실수있나요?
에버그린5943
3년 전
좋은정보 감사드립니다.
3년 전
감사합니다.
3년 전
좋은 정보예요.
앨리스인체인
3년 전
좋은 팁 감사합니다
게시판 목록
영카트5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 161 | 9년 전 | 6840 | ||
| 160 | 9년 전 | 7042 | ||
| 159 |
블랙앤화이트
|
9년 전 | 4592 | |
| 158 | 9년 전 | 5171 | ||
| 157 | 9년 전 | 6790 | ||
| 156 | 9년 전 | 5027 | ||
| 155 | 9년 전 | 7607 | ||
| 154 | 9년 전 | 5389 | ||
| 153 | 9년 전 | 4384 | ||
| 152 | 9년 전 | 6549 | ||
| 151 | 9년 전 | 4758 | ||
| 150 |
|
9년 전 | 5436 | |
| 149 | 9년 전 | 15845 | ||
| 148 | 9년 전 | 7450 | ||
| 147 | 9년 전 | 4103 | ||
| 146 |
|
9년 전 | 5097 | |
| 145 | 9년 전 | 4374 | ||
| 144 |
SSU53rd
|
9년 전 | 9587 | |
| 143 | 9년 전 | 5572 | ||
| 142 |
디자인PHP
|
9년 전 | 4713 | |
| 141 |
디자인PHP
|
9년 전 | 5246 | |
| 140 | 9년 전 | 4806 | ||
| 139 | 9년 전 | 4514 | ||
| 138 | 9년 전 | 5358 | ||
| 137 | 9년 전 | 4612 | ||
| 136 | 9년 전 | 9222 | ||
| 135 | 9년 전 | 4929 | ||
| 134 | 9년 전 | 9105 | ||
| 133 |
개같은내인생
|
9년 전 | 4471 | |
| 132 | 9년 전 | 5099 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기