반복문 관련

반복문 관련

QA

반복문 관련

본문

최신글로 이미지를 보여주는 슬라이더를 사용중입니다. 

이미지와 함께 유튜브영상도 등록후 불러오고 싶어서

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"를 각각 알아볼수있도록 따로 지정도 필요해보이구요

각각 영상에 작동할수있도록 스크립트 함수도 수정이 필요해보이네요

 

답변을 작성하시기 전에 로그인 해주세요.
전체 67
QA 내용 검색

회원로그인

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