KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

[펄스나인] 쉽게쓰는 플로팅 팝업 (유튜브) > 그누보드5 스킨

그누보드5
영카트5
스터디
Q & A
제작의뢰
컨텐츠몰
부가서비스
소모임
커뮤니티
부가서비스
KCP 이벤트!

그누보드5 스킨

스킨 다운로드시 좋아요 클릭과 감사의 코멘트를 남기시면 제작자에게 큰 힘이됩니다. ^^y

[펄스나인] 쉽게쓰는 플로팅 팝업 (유튜브) 정보

레이아웃 [펄스나인] 쉽게쓰는 플로팅 팝업 (유튜브)

첨부파일

첨부파일 _20200606.zip (2.3K) 95회 다운로드 2020-06-07 22:02:32 포인트 차감10
테스트한 버전5.4.2.6
호환 가능 버전무관함

본문

플로팅 팝업 이며 유튜브 재생을 예로 작업해 보았습니다.

꼭 동영상 재생이 아니더라도

갤러리 등 여러곳에 활용할 수 있을것 같습니다.

 

일반 버튼이나 링크, 게시판 리스트 등에서

클릭시 전체화면 레이어 팝업을 통해 유튜브 동영상을 재생 합니다.

 

data-video="_nHRRqlry3o" 부분에 유튜브 동영상 ID 만 넣어주시면 끝!

 

for문이 있는 게시판 리스트 등에 사용하시는 경우 동영상 ID를

여분필드(wr_1)에 저장한다고 가정하면
data-video="<?php echo $list[$i]['wr_1']; ?>" 와 같이 처리하신 후
<!-- 팝업 레이어 --> 부분과 <!-- 스크립트 --> 부분을

for문 밖에 하단부에 넣어주시면 됩니다.

 

위에 미리보기 Url 있습니다~

유용하게 쓰일 수 있기를 기대합니다!

감사합니다.

 

-------------------------------------------

2020-06-07 22:02:32 // 추가

동영상 영역 외 클릭시 팝업이 닫히지만

동영상이 계속 재생되는 문제가 있어 remove() 를 사용하여

확실하게 없애주도록 수정.

팝업을 닫은 후 다시 클릭하면 처음부터 재생 됩니다.

-------------------------------------------

 

구동조건 : 제이쿼리 라이브러리 (그누기본)

크로스브라우징 : 익스11, 엣지, 크롬, 웨일

 

 

乃 실천 하시는분 모두 로또 되시길 :D

추천18

댓글 전체

비메오도 동영상 아이디가 있는 iframe 으로
코드를 제공하는거 같은데 동영상 출력부분 iframe 쪽만
변경해주시면 될거같습니다~
펄스나인님께서 말씀하신것처럼 index.html 페이지를 에디터 편집기로 열면
110번째줄 뒤쪽에 https://youtube.com/embed/ 부분이 있습니다.
그부분을 https://player.vimeo.com/video/ 이렇게 바꿔주시면 됩니다.
그리고 아래부분에 유튜브 코드 입력란에 424765004과 같이
비메오 코드를 넣어주시면 됩니다.
    <div class="divs">
        <a data-video="_nHRRqlry3o" class="popyt mov_b2" style="cursor:pointer;">
            <img src="mov_on.png">
        </a>
    </div>
가로 여덜개씩
총 여덜줄 64개의 유튜브 영상을
적용했는데 적용후 클릭하면
괭장히 심한 렉이 발생합니다.
이부분을 해결하려면 어떻게
해야할련지 조언부탁 드립니다.
음 페이지를 안보고는 말씀을 드리기가 어렵네요.

for문 으로 반복 처리를 하시는경우
클릭시 보여질 유튜브가 들어가는 div 는 64개가 아닌
한개만 나오도록 해주셔야 합니다.

즉, 64개의 리스트가 한 페이지내에 있다고 해도
iframe 코드가 들어가는 div는 1개로 코딩이 되도록
변수처리로 돌아가게끔 해주셔야 합니다.
말씀하신 링크입니다.
제가 말씀하신걸이해를 잘못해서요 ㅠㅠ
iframe은 추가한게 없습니다. ㅠㅠ
두번째건 클릭하시면 렉이심해서
클릭 안하시는게 좋을듯 합니다. 첫번째 텍스트문서만
클릭해서 확인해 보시면 말씀드린대로 8개씩 8줄 총 64개의
영상이 있는데 펄스나인님께서 위에 말씀하신대로 고칠수있는
방법을 예제로 올려주시면 정말 감사하겠습니다. ㅠㅠ

http://eunsolee.co.kr/youtube_test/video_test.txt
http://eunsolee.co.kr/youtube_test/video_test.html
<!-- 팝업 레이어 -->
        <div class="video-popup" id="video-popup-closer2">
        <div class="video-popup-closer" id="video-popup-closer2"></div>
        </div>
<!-- 팝업 레이어 -->

이부분이 동영상 마다 들어가 있어서 그런것 같습니다~
동영상 클릭시 id로 호출을 하는데
id가 모두 동일하니 클릭하면 모두 한번에 띄워버려서 그런것 같네요.

id값을 변경해서 넣거나,
한개만 넣고 id값을 변수처리하거나 해야됩니다 ㅠ
맨아래에 한개만 들어가는것이 좋습니다.
알려주신대로 했는데 렉없이 잘됩니다. 너무 감사합니다 아래처럼 수정해주었습니다.
혹시 저처럼 같은고민을 하는분이 계실지 몰라 수정한것을 올립니다.

    <div class="divs">
        <a data-video="v3d54gconCb8bQnQYIeb1Wk@my" class="popyt mov_b2" style="cursor:pointer;">
            <img src="mov_on.png">
        </a>
    </div>
    <!-- //테스트 버튼 -->

    <div class="divs">
        <a data-video="v3d54gconCb8bQnQYIeb1Wk@my" class="popyt mov_b2" style="cursor:pointer;">
            <img src="mov_on.png">
        </a>
    </div>
    <!-- //테스트 버튼 -->

    <div class="divs">
        <a data-video="v3d54gconCb8bQnQYIeb1Wk@my" class="popyt mov_b2" style="cursor:pointer;">
            <img src="mov_on.png">
        </a>
    </div>
    <!-- //테스트 버튼 -->

    <div class="divs">
        <a data-video="v3d54gconCb8bQnQYIeb1Wk@my" class="popyt mov_b2" style="cursor:pointer;">
            <img src="mov_on.png">
        </a>
    </div>
    <!-- //테스트 버튼 -->

    <!-- 팝업 레이어는 마지막에 아래처럼 하나만 넣었습니다. -->
    <div class="video-popup" id="video-popup-closer16">
        <div class="video-popup-closer" id="video-popup-closer16"></div>
    </div>
    <!-- 팝업 레이어 -->
혹시 팝업창이 닫히지 않는분들이 계실까해서 올립니다.
아래 이미지가 끝나는 부분 width="172" height="136"></div>에
width="172" height="136"></a></div> 등과 같이 </a> 태그를 붙여주셔야
동영상이 닫히지 않는 오류가 생기지 않으니 참고해주세요
펄스나인님 고맙습니다 덕분에 잘쓰고 있습니다 ^^

        <div class="divs">
        <a data-video="qM4WoEp1bHs" class="popyt mov_b2" style="cursor:pointer;">
        <img src="images/001.png" width="172" height="136"></a></div>

<div class="divs">
    <a data-video="_nHRRqlry3o" class="popyt mov_b2" style="cursor:pointer;">
    <img src="mov_on.png">
    </a>
</div>


네 맞습니다~
a 태그는 닫아주셔야 합니다~
올려드린 코드에는 닫혀있습니다 ㅎㅎ

해결되셨다니 다행 입니다 ^^
안녕하세요~
작업 해놓은것은 없네요 ㅠ
유튜브가 들어간 최신글이라 일반적이질 않아서
시간될때 세트로 작업한번 해보겠습니다~
전체 1,847 |RSS
그누보드5 스킨 내용 검색

회원로그인

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

© SIRSOFT