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

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

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

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

첨부파일

_20200606.zip (2.3K) 272회 다운로드 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

추천
22
  • 복사
#PC용 #모바일용 #반응형

댓글 전체

펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.06.08 11:56:26
비메오도 동영상 아이디가 있는 iframe 으로
코드를 제공하는거 같은데 동영상 출력부분 iframe 쪽만
변경해주시면 될거같습니다~
eunsolee 자기소개 아이디로 검색 전체게시물 회원게시물 20.06.23 13:52:51
펄스나인님께서 말씀하신것처럼 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>
eunsolee 자기소개 아이디로 검색 전체게시물 회원게시물 20.06.23 00:03:43 모바일
가로 여덜개씩
총 여덜줄 64개의 유튜브 영상을
적용했는데 적용후 클릭하면
괭장히 심한 렉이 발생합니다.
이부분을 해결하려면 어떻게
해야할련지 조언부탁 드립니다.
펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.06.23 01:19:25
음 페이지를 안보고는 말씀을 드리기가 어렵네요.

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

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

http://eunsolee.co.kr/youtube_test/video_test.txt
http://eunsolee.co.kr/youtube_test/video_test.html
펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.06.23 12:05:25
<!-- 팝업 레이어 -->
        <div class="video-popup" id="video-popup-closer2">
        <div class="video-popup-closer" id="video-popup-closer2"></div>
        </div>
<!-- 팝업 레이어 -->

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

id값을 변경해서 넣거나,
한개만 넣고 id값을 변수처리하거나 해야됩니다 ㅠ
맨아래에 한개만 들어가는것이 좋습니다.
eunsolee 자기소개 아이디로 검색 전체게시물 회원게시물 20.06.23 13:45:55
알려주신대로 했는데 렉없이 잘됩니다. 너무 감사합니다 아래처럼 수정해주었습니다.
혹시 저처럼 같은고민을 하는분이 계실지 몰라 수정한것을 올립니다.

    <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>
    <!-- 팝업 레이어 -->
eunsolee 자기소개 아이디로 검색 전체게시물 회원게시물 20.06.23 14:04:31
혹시 팝업창이 닫히지 않는분들이 계실까해서 올립니다.
아래 이미지가 끝나는 부분 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>
펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.06.23 14:53:50 

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


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

해결되셨다니 다행 입니다 ^^
펄스나인 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물 20.09.24 14:50:52
안녕하세요~
작업 해놓은것은 없네요 ㅠ
유튜브가 들어간 최신글이라 일반적이질 않아서
시간될때 세트로 작업한번 해보겠습니다~
목록
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로