AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전
목록
다음
비

아이프레임 전용게시판

비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2021-08-27 (금) 16:29:40 · 4143 · 28

링크

http://www.mediaplayer.kr/main/demo/demo_iframe.php (460) http://www.mediaplayer.kr/main/tip/36 (255)
face.jpg

아이프레임 전용게시판입니다.

상단 링크글은 아이프레임이 적용된 모습이고 pc와 모바일 패이지를 따로 만들긴 했지만 반응형입니다.

 

게시판의 진짜 모습은

 

1. 가로 960px - http://www.mediaplayer.kr/main/iframe/1

2. 가로 100% - http://www.mediaplayer.kr/main/iframe/2 --- 반응형

 

이 게시판은 내용물이 좌상단에 찰싹 붙어 나타나고 나머지 부분은 보이지 않습니다.

단 관리자의 경우 pc 디바이스에서만 내용물 하단에 기본버튼들이 나타납니다.

기본적으로 자바스크립트 전용게시판과 사용법이 동일합니다. - https://sir.kr/g5_skin/45542 - 대신 미리보기 에디터를 스킨 디렉토리 안에 넣어 놓은 것만 다릅니다.

 

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

 

1. 먼저 게시판 권한에서 글읽기 권한만 모두가 볼 수 있게 1을 주고 나머지 권한은 전부 10으로 주세요.

 

988289629_1630048075.1528.jpg

 

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

 

2. 상단 파일 경로와 하단 파일 경로를 빈칸 처리합니다.

 

##### 5.4.18 버전 이후로 옵션이 바뀌었습니다. #####

그래서 상단파일경로는 _head.sub.php 로 하단파일경로는 _tail.sub.php 로 입력해 주세요.

이렇게 하면 이전의 5.4버전도 모두 먹습니다.

 

988289629_1630048242.3259.jpg

 

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

 

3. 내용물을 반응형으로 만들지 않았다면 pc 아이프레임과 모바일 아이프레임은 본인들이 재주껏 환경에 맞추어서 각각 따로 만들면 됩니다.

 

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

 

4. 내용물이 반응형일 때 아이프레임으로 거는 방법입니다.

 

1) 내용물의 가로 세로 비율을 뽑아 세로 나누기 가로의 수치를 이용합니다.

저는 가로 960에 세로 540짜리 이미지를 기준으로 만들었으므로 그 비율은 540 / 960 이 되겠지요.

 

2) 아래의 소스로 걸어줍니다.

 

[code]

<div id=iframeDiv><iframe src=게시글주소 style=width:100%;height:100%;display:block frameborder=0 scrolling=no></iframe></div>
<script>
onresize = function() { iframeDiv.style.height = iframeDiv.offsetWidth * 540 / 960 + "px"; }
onresize();
</script> 

[/code]

 

아이프레임의 가로 세로길이를 모두 100 퍼센트로 준 다음...

하단 스크립트로 div 의 세로길이를 div 의 offsetWidth 에  540 / 960 을 곱한 값을 픽셀로 뺀 수치입니다.

여기서 onresize 이벤트가 필요한 이유는 모바일로 접속시 세로모드에서 가로모드로 바뀔 때거나 그 반대일 때 다시 한번 세로 길이를 갱신해줘야 하기 때문에 필요합니다.

중요한 건 게시글의 내용 자체가 반응형 퍼센트로 만들어져 있어야 하겠지요.

 

제가 게시글에서 사용한 소스는 아래와 같습니다. 여기서도 비슷한 방식으로 세로길이를 맞추고 있습니다.

 

[code]

<div id=mainDiv style=width:100%;overflow:hidden>
    <div id=imgDiv style=width:100%;height:100%;cursor:pointer;background-size:contain;background-image:url(https://blog.kakaocdn.net/dn/wot1z/btrdkOsGxcx/S0pjTDpGx0uLnzCHNxKAAK/img.jpg)>
        <video id=videoPlayer style=width:100%;mix-blend-mode:screen;display:block src=https://blog.kakaocdn.net/dn/c07nfJ/btrdmAHtO9f/zLh5ghgQVVa5vgDES5a4e1/tfile.mp4 loop muted></video>
        <audio id=audioPlayer src=https://blog.kakaocdn.net/dn/dBuOu2/btrdivHnfKM/bvMaixvAJUK3CN1LAL2oO0/tfile.mp3 loop></audio>
    </div>
</div>
<script>
playerMode = 1;
mainDiv.onclick = function() {
    if (playerMode) { audioPlayer.play(), videoPlayer.play(), imgDiv.style.backgroundImage = "url(https://blog.kakaocdn.net/dn/dpxDdN/btrdj677VT5/FP3chnNKIkRUSzrnNxCxXk/img.jpg)", playerMode = 0; }
    else { audioPlayer.pause(), videoPlayer.pause(), imgDiv.style.backgroundImage = "url(https://blog.kakaocdn.net/dn/wot1z/btrdkOsGxcx/S0pjTDpGx0uLnzCHNxKAAK/img.jpg)", playerMode = 1; }
}
onresize = function() { mainDiv.style.height = mainDiv.offsetWidth * 540 / 960 + "px"; }
onresize();
</script>

[/code]

 

크롬과 안드로이드에서만 확인하였고 그누 순정에서 작업하였습니다.

 

 

#PC용 #모바일용

버전 정보

테스트한 버전 5.4.9
호환 가능 버전 아마도 모두

첨부파일

face.jpg (233.9 KB) 1회 2021-08-27 16:29
iframe.zip (412.9 KB) 65회 2021-08-27 16:29
|

댓글 28개

미키손
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-27 (금) 17:27:48
감사합니다 제가 찾던 기능입니다
요긴하게 사용토록 하겠습니다
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-27 (금) 18:19:11
예 유용하게 쓰세요
man7777
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-27 (금) 17:49:16
감사합니다. 수고하셨습니다~
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-27 (금) 18:19:31
늘 격려주셔서 감사요
푸푸우니
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-27 (금) 18:14:39
감사합니다.
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-27 (금) 18:19:49
예 감사합니다
트트리플
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-27 (금) 19:29:41
감사합니다.
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-27 (금) 22:27:27
감사합니다.
들레아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-27 (금) 22:34:32
수고 하셨습니다. 감사 드립니다. 멋지네요.
[http://sir.kr/data/editor/2108/a62d2a6c7bdb1ef3adacd5c242a00b4c_1630071267_2416.png]
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-27 (금) 23:51:03
늦은 밤에 감사드려요.
몽몽당s연필
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-27 (금) 23:32:24
감사합니다.
적용시켰는데, 좋네요.
잘 사용하겠습니다
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-27 (금) 23:51:15
늘 감사합니다.
천천담바라
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-28 (토) 20:32:59
노래 좋습니다 :)
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-28 (토) 21:24:11
저도 젊은 시절에 참 좋아했던 노래였지요.
아이스웨덴™
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-31 (화) 09:55:40
이럴수가 ㅋㅋㅋ 생각만 했던 기능이었습니다. 너무 감사합니다.
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-08-31 (화) 12:46:06
원하셨던 기능이라니 다행입니다.
KimHyoyoung
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-09-02 (목) 15:52:26
감사합니다.
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-09-02 (목) 19:53:34
감사합니다
그그렌트힐
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-09-03 (금) 22:19:50
와우
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-09-14 (화) 10:39:13
감사합니다
난최고다
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-09-12 (일) 18:53:39
멋있어요
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-09-14 (화) 10:39:22
감사합니다
별별지기천사
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-09-13 (월) 17:58:11
아이프래임
비비타주리
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-09-14 (화) 10:39:38
감사합니다
써써맨
프로필 보기이 회원 글보기이 회원의 댓글보기
 2021-10-06 (수) 12:32:22
감사합니다.
MulakYi
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-12-18 (일) 20:00:36
최고입니다~~
리얼Real
프로필 보기이 회원 글보기이 회원의 댓글보기
 2022-12-26 (월) 20:12:36
감사합니다!
황혼시대
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-06-17 (토) 20:48:36
비타주리님! 늘 감사합니다
아주 유익하고 좋은 소스를 감사한 마음으로 잘 활용하고 있습니다.
주옥같은 소스도 많이 개발하셨지만, 이번 아이프레임 소스도 무척 유용하고 다시 한번 더 감사의 말씀을 드립니다. 주님의 은혜와 사랑이 늘 충만하시기를 기도합니다.
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 스킨

2,750건

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

태그 필터 (최대 3개) 전체 PC용 모바일용 반응형
+