반복문 관련 채택완료
망이망소이
3년 전
조회 3,569
최신글로 이미지를 보여주는 슬라이더를 사용중입니다.
이미지와 함께 유튜브영상도 등록후 불러오고 싶어서
latest.skin.php 에
include(G5_THEME_PATH."/_youtubeplayer.php");
추가했습니다.
반복문이니까 3개 영상등록하면 3개 순서대로 나올줄 알았는데 첫번째 슬라이더만 영상이 나오네요.
나머지는 '두번째영상의 유튜브대표이미지 - 첫번째영상의 유튜브대표이미지' 순으로나오구요.
어디가 문제일까요???
latest.skin.php
</p>
<p><?php for ($i=0; $i<count($list); $i++) {
$j = $i + 1;
?></p>
<p> <?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;
?></p>
<p> <?php echo '</li>' ?></p>
<p> <?php } ?></p>
<p>
_youtubeplayer.php 내용은
</p>
<p><style>
#page-banner {
text-align: center;
position: relative;
color: #ffffff;
height: 100%;
overflow: hidden;
}</p>
<p> .bg-image {
background-size: cover;
background-position: center center;
}</p>
<p> .overlay {
position: relative;
background-color: rgba(102, 15, 39, 0);
height: 100%;
width: 100%;
z-index: 1;
}</p>
<p> .inner {
padding-top: 50px;
}</p>
<p> h1 {
color: #ffffff;
margin: 0 auto;
}</p>
<p> .video_wrap {
width: 100%;
height: 100%;
position: absolute;
left: 0;
overflow: hidden;
top: 0;
padding-bottom: 56.5%;
}</p>
<p> iframe {
position: absolute;
width: 100%;
height: 100%;
top: -100px;
left: 0;
}</p>
<p> @media(max-width:2230px) {
iframe {
width: 120%;
height: 120%;
top: -120px;
left: -170px;
}</p>
<p> }</p>
<p> @media(max-width:1880px) {
iframe {
width: 140%;
height: 140%;
top: -133px;
left: -345px;
}</p>
<p> }</p>
<p> @media(max-width:1660px) {
iframe {
width: 160%;
height: 160%;
top: -159px;
left: -455px;
}</p>
<p> }
</p>
<p> @media(max-width:1440px) {
iframe {
width: 180%;
height: 180%;
top: -300px;
left: -526px;
}</p>
<p> }</p>
<p> @media(max-width:1220px) {
iframe {
width: 200%;
height: 200%;
top: -428px;
left: -624px;
}
}</p>
<p> @media(max-width:1100px) {
iframe {
width: 220%;
height: 220%;
top: -566px;
left: -450px;
}</p>
<p> }</p>
<p> @media(max-width:768px) {
iframe {
display: none;
}</p>
<p> }</p>
<p> @media(max-width:425px) {
.overlay {
background-color: rgba(0, 0, 0, 0.7);
}</p>
<p> }</p>
<p> @media(max-width:375px) {
/*Mobile-M*/</p>
<p> }</p>
<p> @media(max-width:320px) {
/*Mobile-S*/</p>
<p> }</p>
<p></style></p>
<p>
<section id="page-banner" class="bg-image" style="background:url(<a href="https://img.youtube.com/vi/<?php" target="_blank" rel="noopener noreferrer">https://img.youtube.com/vi/<?php</a> 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></p>
<p>
<script>
// YouTube IFrame API JavaScript 코드를 로드합니다..
var tag = document.createElement('script');
tag.src = "<a href="https://www.youtube.com/iframe_api";" target="_blank" rel="noopener noreferrer">https://www.youtube.com/iframe_api";</a>
// YouTube JS 코드를 페이지에 삽입합니다.
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);</p>
<p> var player;</p>
<p> // 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
}
});
}</p>
<p> 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();
}
}
}</p>
<p> function pkOnPlayerReady(e) {
player.mute();
e.target.setPlaybackQuality('hd720');
}</p>
<p> //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 = "<a href="https://s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif?"" target="_blank" rel="noopener noreferrer">https://s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif?"</a> + new Date().getTime();
return deferred.promise();
};</p>
<p> //비디오가 로드되기 시작하면 비디오 랩이 페이드 인되도록 타이머를 설정하십시오.
jQuery(function($) {
$.when(pkEnableYoutube()).done(function() {
setTimeout(function() {
$('.video_wrap').fadeIn();
}, 2000);
});
});</p>
<p></script>
</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
3년 전
_youtubeplayer.php 에 들어있는 스타일,스크립트를 다른 파일로 빼세요
저렇게하시면 영상 3개를 넣었다고했을때 _youtubeplayer.php가 세번 불러오잖아요?
그러면 스크립트 함수 중복에 충돌납니다 id도 여러개 존재할수없는거 아시죠?
따로 영상 출력 스크립트를 만들어서 인클루드하시고(반복문에서 말고 밖에서요)
id="player"를 각각 알아볼수있도록 따로 지정도 필요해보이구요
각각 영상에 작동할수있도록 스크립트 함수도 수정이 필요해보이네요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
망이망소이
3년 전
아하 그렇군요. 감사합니다. ^^
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인