반복문 관련
본문
최신글로 이미지를 보여주는 슬라이더를 사용중입니다.
이미지와 함께 유튜브영상도 등록후 불러오고 싶어서
latest.skin.php 에
include(G5_THEME_PATH."/_youtubeplayer.php");
추가했습니다.
반복문이니까 3개 영상등록하면 3개 순서대로 나올줄 알았는데 첫번째 슬라이더만 영상이 나오네요.
나머지는 '두번째영상의 유튜브대표이미지 - 첫번째영상의 유튜브대표이미지' 순으로나오구요.
어디가 문제일까요???
latest.skin.php
<?php for ($i=0; $i<count($list); $i++) {
$j = $i + 1;
?>
<?php
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $board['bo_gallery_width'], $board['bo_gallery_height']);
if($list[$i]['wr_13']) {
echo '<li class="backimage">';
include(G5_THEME_PATH."/_youtubeplayer.php");
} else {
$img_content = '<li class="backimage "><img class="responsiveimg" u="image" src="'.$thumb['src'].'" alt="'.$thumb['alt'].'">';
}
echo $img_content;
?>
<?php echo '</li>' ?>
<?php } ?>
_youtubeplayer.php 내용은
<style>
#page-banner {
text-align: center;
position: relative;
color: #ffffff;
height: 100%;
overflow: hidden;
}
.bg-image {
background-size: cover;
background-position: center center;
}
.overlay {
position: relative;
background-color: rgba(102, 15, 39, 0);
height: 100%;
width: 100%;
z-index: 1;
}
.inner {
padding-top: 50px;
}
h1 {
color: #ffffff;
margin: 0 auto;
}
.video_wrap {
width: 100%;
height: 100%;
position: absolute;
left: 0;
overflow: hidden;
top: 0;
padding-bottom: 56.5%;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
top: -100px;
left: 0;
}
@media(max-width:2230px) {
iframe {
width: 120%;
height: 120%;
top: -120px;
left: -170px;
}
}
@media(max-width:1880px) {
iframe {
width: 140%;
height: 140%;
top: -133px;
left: -345px;
}
}
@media(max-width:1660px) {
iframe {
width: 160%;
height: 160%;
top: -159px;
left: -455px;
}
}
@media(max-width:1440px) {
iframe {
width: 180%;
height: 180%;
top: -300px;
left: -526px;
}
}
@media(max-width:1220px) {
iframe {
width: 200%;
height: 200%;
top: -428px;
left: -624px;
}
}
@media(max-width:1100px) {
iframe {
width: 220%;
height: 220%;
top: -566px;
left: -450px;
}
}
@media(max-width:768px) {
iframe {
display: none;
}
}
@media(max-width:425px) {
.overlay {
background-color: rgba(0, 0, 0, 0.7);
}
}
@media(max-width:375px) {
/*Mobile-M*/
}
@media(max-width:320px) {
/*Mobile-S*/
}
</style>
<section id="page-banner" class="bg-image" style="background:url(https://img.youtube.com/vi/<?php echo $list[$i]['wr_13'] ?>/maxresdefault.jpg) center top no-repeat; background-size: cover;">
<div class="overlay">
</div>
<div class="video_wrap" style="">
<div id="player"></div>
</div>
</section>
<script>
// YouTube IFrame API JavaScript 코드를 로드합니다..
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
// YouTube JS 코드를 페이지에 삽입합니다.
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
// onYouTubeIframeAPIReady()는 IFrame API를 사용할 준비가 되면 호출됩니다.
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: '<?php echo $list[$i]['wr_13'] ?>',
playerVars: {
'autoplay': 1,
'controls': 0,
'showinfo': 0,
'rel': 0,
'enablejsapi': 1,
'wmode': 'transparent'
},
events: {
'onReady': pkOnPlayerReady,
'onStateChange': pkOnPlayerStateChange
}
});
}
function pkOnPlayerStateChange(e) {
var frm = $(e.target.getIframe());
if (e.data === YT.PlayerState.ENDED) {
if ('player' === frm.attr('id')) {
player.playVideo();
}
}
if (e.data === YT.PlayerState.BUFFERING) {
if ('player' === frm.attr('id')) {
//e.target.setPlaybackQuality('hd720');
player.playVideo();
}
}
}
function pkOnPlayerReady(e) {
player.mute();
e.target.setPlaybackQuality('hd720');
}
//YouTube 픽셀 로드
var pkEnableYoutube = function() {
var deferred = jQuery.Deferred();
var img = new Image();
img.onload = function() {
return deferred.resolve();
};
img.onerror = function() {
return deferred.reject();
};
img.src = "https://s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif?" + new Date().getTime();
return deferred.promise();
};
//비디오가 로드되기 시작하면 비디오 랩이 페이드 인되도록 타이머를 설정하십시오.
jQuery(function($) {
$.when(pkEnableYoutube()).done(function() {
setTimeout(function() {
$('.video_wrap').fadeIn();
}, 2000);
});
});
</script>
답변 1
_youtubeplayer.php 에 들어있는 스타일,스크립트를 다른 파일로 빼세요
저렇게하시면 영상 3개를 넣었다고했을때 _youtubeplayer.php가 세번 불러오잖아요?
그러면 스크립트 함수 중복에 충돌납니다 id도 여러개 존재할수없는거 아시죠?
따로 영상 출력 스크립트를 만들어서 인클루드하시고(반복문에서 말고 밖에서요)
id="player"를 각각 알아볼수있도록 따로 지정도 필요해보이구요
각각 영상에 작동할수있도록 스크립트 함수도 수정이 필요해보이네요
아하 그렇군요. 감사합니다. ^^
답변을 작성하시기 전에 로그인 해주세요.
