[펄스나인] 쉽게쓰는 UI/UX - 플로팅 팝업 (유튜브) 정보
레이아웃 [펄스나인] 쉽게쓰는 UI/UX - 플로팅 팝업 (유튜브)
관련링크
http://false9.inour.net/_20200606/
1565회 연결
첨부파일
테스트한 버전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
22
댓글 전체
비메오도 부탁드립니다
비메오도 동영상 아이디가 있는 iframe 으로
코드를 제공하는거 같은데 동영상 출력부분 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>
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>
감사합니다.
감사합니다~
좋은 스킨 감사합니다
감사합니다~ 잘쓰세요
감사 합니다
감사합니다~
감사합니다.
감사합니다~!
놀라운 실력 !!
감사합니다 ^^
이번주 로또는 미리 사놔야겠네요 ㅎㅎ
감사합니다 ^^
이번주 로또는 미리 사놔야겠네요 ㅎㅎ
ㅎㅎㅎ 꼭 되시길... :D
가로 여덜개씩
총 여덜줄 64개의 유튜브 영상을
적용했는데 적용후 클릭하면
괭장히 심한 렉이 발생합니다.
이부분을 해결하려면 어떻게
해야할련지 조언부탁 드립니다.
총 여덜줄 64개의 유튜브 영상을
적용했는데 적용후 클릭하면
괭장히 심한 렉이 발생합니다.
이부분을 해결하려면 어떻게
해야할련지 조언부탁 드립니다.
음 페이지를 안보고는 말씀을 드리기가 어렵네요.
for문 으로 반복 처리를 하시는경우
클릭시 보여질 유튜브가 들어가는 div 는 64개가 아닌
한개만 나오도록 해주셔야 합니다.
즉, 64개의 리스트가 한 페이지내에 있다고 해도
iframe 코드가 들어가는 div는 1개로 코딩이 되도록
변수처리로 돌아가게끔 해주셔야 합니다.
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
제가 말씀하신걸이해를 잘못해서요 ㅠㅠ
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="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>
<!-- 팝업 레이어 -->
혹시 저처럼 같은고민을 하는분이 계실지 몰라 수정한것을 올립니다.
<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>
아래 이미지가 끝나는 부분 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 태그는 닫아주셔야 합니다~
올려드린 코드에는 닫혀있습니다 ㅎㅎ
해결되셨다니 다행 입니다 ^^
감사합니다. 멋져요.
감사합니다~!
감사합니다.
^^
항상 좋은 스킨 감사합니다 :-)
댓글 감사합니다 ^^ 편안한 하루 되셔요~
오 필요하던건데 한번써봐야겠어요
^^ 감사합니다 잘 써주십시요!
감사합니다. 혹시 최신갤러리로 올려주신다면.. 총알 모아놨습니다.
안녕하세요~
작업 해놓은것은 없네요 ㅠ
유튜브가 들어간 최신글이라 일반적이질 않아서
시간될때 세트로 작업한번 해보겠습니다~
작업 해놓은것은 없네요 ㅠ
유튜브가 들어간 최신글이라 일반적이질 않아서
시간될때 세트로 작업한번 해보겠습니다~
넵 감사합니다 ^^
필요했는데 감사히 쓰겠습니다^^
댓글 감사합니다 !
잘 써주십시요 ^^
잘 써주십시요 ^^
감사합니다 !
감사합니다~!
잘 사용하겠습니다.
감사합니다.
감사합니다.
댓글 감사합니다! 잘쓰셔요~
감사합니다~!
감사합니다~!
감사합니다
^^
역시 멋진 스킨입니다. 잘 활용하겠습니다!
여기도 댓글 주셨네요 ^^
좋은 말씀 감사합니다~ 잘 써주십시요!
좋은 말씀 감사합니다~ 잘 써주십시요!
미리보기가 안되요
예전에 작업했던것들은 서버를 이제 안써서 ㅠ
나중에 시간될때 옮겨두겠습니다 ㅠㅠ
캡쳐 그대로입니다 ..ㅎ
나중에 시간될때 옮겨두겠습니다 ㅠㅠ
캡쳐 그대로입니다 ..ㅎ
감사합니다. 잘쓰겠습니다!
감사합니다!
필요했던 것인데 감사합니다!!!
도움이 되셨으면 좋겠습니다! ㅎㅎ
감사합니다
