게시판
- 주 의 - 1. 읽기(뷰) 화면을 사용 하지 않습니다. 2. 비회원 글쓰기 불능(?) 회원 부터 관리자 까지 가능 3. 순정 스킨 에서 이것저것 지워서 많이(!?) 단순 합니...
[펄스나인] 쉽게쓰는 UI/UX - 플로팅 팝업 (유튜브)
플로팅 팝업 이며 유튜브 재생을 예로 작업해 보았습니다.
꼭 동영상 재생이 아니더라도
갤러리 등 여러곳에 활용할 수 있을것 같습니다.
일반 버튼이나 링크, 게시판 리스트 등에서
클릭시 전체화면 레이어 팝업을 통해 유튜브 동영상을 재생 합니다.
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
버전 정보
테스트한 버전
5.4.2.6
호환 가능 버전
무관함
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
그누보드5 스킨
2,750건좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
게시판
게시판 스킨 업데이트 이모티콘 게시판 스킨 안내 (코드수정) (하단 링크에 모바일용 게시판 이모티콘 상점, 관리자용 이모티콘 관리 플러그인 필수 설치 필요) 게시판, 상점 모바일버...
게시판
3단 분류. 기본 basic 스킨 [v5.6.24] 설치폴더 /theme/basic/skin/board/basic (사용자 마다 다를 수 있습니다. 확인 후 진행해 주세요.) ==...
레이아웃
# 실시간 윈도우 화면공유 업데이트내용 1.심플UI변경 2.캠화면 확대 기능 3.자신 카메라 음소거기능 4.자기 자신카메라 안보이게 하는 기능 5.화면에 ID표기 6.상대편 음성이...
레이아웃
그누보드에 이런기능이 있으면 좋을것 같아서 숟가락 얻져 봤어요 6명까지 지원하는 멀티화상 음성통화 회원아이디 연동 환경조건 http에서는 안되요 https 환경에서 구동 됩니...
갤러리
그누보드 모바일 갤러리 스킨 (멀티 업로드 지원 / 반응형) 그누보드 기본 갤러리 스킨을 기반으로, 실사용에 편리하도록 멀티 업로드 기능을 추가한 모바일 갤러리 스킨입니다. ✅ 여...
게시판
그누보드 모바일 기본 스킨 + 멀티 업로드 기능 추가 그누보드 제일 기본 모바일 스킨을 기반으로, 실사용에 꼭 필요한 멀티 업로드 기능을 추가한 스킨입니다. ✅ 기본에 충실한 깔끔...
레이아웃
소스에서 해당게시판명을 넣어주시면 됩니다. 그누보드 설치한 루트에 올리시면 됩니다. 이런식으로 파일 하나로도 가능하네요. 기능을 보완해 사용하실려면 적절히 코드를 수정하셔야 합니다...
레이아웃
2개의 파일을 그누보드에 올리시고 게시판 명을 수정해 주시면 됩니다. 게시판은 news를 사용했습니다. 메뉴는 카테고리를 활용했습니다. 리스트와 뷰 형식입니다. 블로그형식이나 뉴...
회원통합스킨
학습형 챗로봇 ajax Chat 업데이트 업데이트 내용 1.동영상파일 재생토록 합니다. 2.mp3플에이어 장착 3.음양그래프 장착 4.EQ 컨트룰바 생성 &볼륨 조정 생성 ...
최신글
안녕하세요. on입니다. 받기만 하다가 저도 올려봅니다. 메인으로 사용하는 반응형 스와이퍼입니다. 파일링크2번과 여분필드도 추가했습니다. 1. pc버전 2.모바일버전...
최신글
해당 파일을 그누보드가 설치된 폴더에 올리시고 테마 tail.php 파일에 아래 코드를 삽입하시면 됩니다. 위젯 타잎은 특정 폴더를 만들어 관리하시면 편합니다. <?php in...
댓글 52개
코드를 제공하는거 같은데 동영상 출력부분 iframe 쪽만
변경해주시면 될거같습니다~
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>
[/code]
네 맞습니다~
a 태그는 닫아주셔야 합니다~
올려드린 코드에는 닫혀있습니다 ㅎㅎ
해결되셨다니 다행 입니다 ^^
작업 해놓은것은 없네요 ㅠ
유튜브가 들어간 최신글이라 일반적이질 않아서
시간될때 세트로 작업한번 해보겠습니다~
잘 써주십시요 ^^
감사합니다.
좋은 말씀 감사합니다~ 잘 써주십시요!
나중에 시간될때 옮겨두겠습니다 ㅠㅠ
캡쳐 그대로입니다 ..ㅎ
감사합니다