아이프레임 전용게시판 정보
게시판 아이프레임 전용게시판
관련링크
첨부파일
본문
아이프레임 전용게시판입니다.
상단 링크글은 아이프레임이 적용된 모습이고 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으로 주세요.
--------------------
2. 상단 파일 경로와 하단 파일 경로를 빈칸 처리합니다.
##### 5.4.18 버전 이후로 옵션이 바뀌었습니다. #####
그래서 상단파일경로는 _head.sub.php 로 하단파일경로는 _tail.sub.php 로 입력해 주세요.
이렇게 하면 이전의 5.4버전도 모두 먹습니다.
--------------------
3. 내용물을 반응형으로 만들지 않았다면 pc 아이프레임과 모바일 아이프레임은 본인들이 재주껏 환경에 맞추어서 각각 따로 만들면 됩니다.
-------------------
4. 내용물이 반응형일 때 아이프레임으로 거는 방법입니다.
1) 내용물의 가로 세로 비율을 뽑아 세로 나누기 가로의 수치를 이용합니다.
저는 가로 960에 세로 540짜리 이미지를 기준으로 만들었으므로 그 비율은 540 / 960 이 되겠지요.
2) 아래의 소스로 걸어줍니다.
<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>
아이프레임의 가로 세로길이를 모두 100 퍼센트로 준 다음...
하단 스크립트로 div 의 세로길이를 div 의 offsetWidth 에 540 / 960 을 곱한 값을 픽셀로 뺀 수치입니다.
여기서 onresize 이벤트가 필요한 이유는 모바일로 접속시 세로모드에서 가로모드로 바뀔 때거나 그 반대일 때 다시 한번 세로 길이를 갱신해줘야 하기 때문에 필요합니다.
중요한 건 게시글의 내용 자체가 반응형 퍼센트로 만들어져 있어야 하겠지요.
제가 게시글에서 사용한 소스는 아래와 같습니다. 여기서도 비슷한 방식으로 세로길이를 맞추고 있습니다.
<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>
크롬과 안드로이드에서만 확인하였고 그누 순정에서 작업하였습니다.
18
댓글 전체
요긴하게 사용토록 하겠습니다
적용시켰는데, 좋네요.
잘 사용하겠습니다
아주 유익하고 좋은 소스를 감사한 마음으로 잘 활용하고 있습니다.
주옥같은 소스도 많이 개발하셨지만, 이번 아이프레임 소스도 무척 유용하고 다시 한번 더 감사의 말씀을 드립니다. 주님의 은혜와 사랑이 늘 충만하시기를 기도합니다.
