동영상 파일을 모바일에서 창 크기에 맞춰서 출력하기 2
http://sir.co.kr/bbs/board.php?bo_table=g5_tip&wr_id=1733&sfl=mb_id%2C1&stx=fm25
위 글과 관련입니다.
[code]<div class="video-container" style="text-align:center">
<iframe width="640" height="480" src="//www.youtube.com/embed/hDkVQvhZx04?rel=0" frameborder="0" allowfullscreen></iframe>
</div>[/code]
위 예와 같이 글을 쓸 때, div class를 수동으로 입력해줘야 한다고 말씀드렸는데...
이것이 번거롭다면 자동으로 적용되게 바꿔봅니다.
위에 첨부한 'jquery.mobile.resize.js' 파일을 js 폴더에 넣어줍니다.
내용은 단순합니다.
[code]$( function() {
$("embed").wrap("<div class='video-container [vimeo, widescreen]'></div>");
$("iframe").wrap("<div class='video-container [vimeo, widescreen]'></div>");
});[/code]
그리고 'mobile/skin/board/basic/view.skin.php' 파일에
[code]<script src="<?php echo G5_JS_URL; ?>/jquery.mobile.resize.js"></script>[/code]
를 삽입해줍니다.
{이미지:0}
잘못된 부분이 있으면 지적바랍니다.
위 글과 관련입니다.
[code]<div class="video-container" style="text-align:center">
<iframe width="640" height="480" src="//www.youtube.com/embed/hDkVQvhZx04?rel=0" frameborder="0" allowfullscreen></iframe>
</div>[/code]
위 예와 같이 글을 쓸 때, div class를 수동으로 입력해줘야 한다고 말씀드렸는데...
이것이 번거롭다면 자동으로 적용되게 바꿔봅니다.
위에 첨부한 'jquery.mobile.resize.js' 파일을 js 폴더에 넣어줍니다.
내용은 단순합니다.
[code]$( function() {
$("embed").wrap("<div class='video-container [vimeo, widescreen]'></div>");
$("iframe").wrap("<div class='video-container [vimeo, widescreen]'></div>");
});[/code]
그리고 'mobile/skin/board/basic/view.skin.php' 파일에
[code]<script src="<?php echo G5_JS_URL; ?>/jquery.mobile.resize.js"></script>[/code]
를 삽입해줍니다.
{이미지:0}
잘못된 부분이 있으면 지적바랍니다.
댓글 16개
11년 전
앞의 게시글에 덧붙혀 넣지않고 따로 게시한 이유는... 이 팁에 오류가 있을 지도 모르기 때문입니다.
지운이 부친이 알려주신 http://fitvidsjs.com
이나
이와 유사한 방법들은 구현이 안되더군요.
가능한 구체적인 방법을 아시는 분이 계시면 알려주시면 고맙겠습니다.
지운이 부친이 알려주신 http://fitvidsjs.com
이나
이와 유사한 방법들은 구현이 안되더군요.
가능한 구체적인 방법을 아시는 분이 계시면 알려주시면 고맙겠습니다.
11년 전
'jquery.mobile.resize.js' 파일을 수정해서 올렸습니다.
내용에 본문 내용을 반영하지 않고... 저장했다고 착각하고 올려버렸네요...;;;
내용에 본문 내용을 반영하지 않고... 저장했다고 착각하고 올려버렸네요...;;;
잘되야될텐데
11년 전
감사합니다. 정말 좋은 팁이군요
잘되야될텐데
11년 전
이 팁을 일반 스킨에 적용하면 iframe 태그에 적용된 width 값과 height 값과 상관 없이
width 100%의 16대 9 화면으로 무조건 적용이 되겠죠?
그리고 에디터에서도 작동할까요?
말씀대로 베이직에 js 추가하고 css 추가하고 js불러왔는데 잘 안되네요 제가 cheditor5.0 에디터인데
에디터 문제 같습니다.
width 100%의 16대 9 화면으로 무조건 적용이 되겠죠?
그리고 에디터에서도 작동할까요?
말씀대로 베이직에 js 추가하고 css 추가하고 js불러왔는데 잘 안되네요 제가 cheditor5.0 에디터인데
에디터 문제 같습니다.
11년 전
PC판에서는 적용해보지 않았는데... 소스는 html모드로 입력해야 하므로 에디터 문제는 아닐 듯 합니다.
<iframe width="640" height="480" src="//www.youtube.com/embed/hDkVQvhZx04?rel=0" frameborder="0" allowfullscreen></iframe>에서...
width="640" height="480"
를
width="100%" height="auto"
로 바꾸거나 삭제하면 되지않을까도 싶네요.
그런데, 게시판 화면에 꽉 차면... 너무 커서 부담스럽더군요.
<iframe width="640" height="480" src="//www.youtube.com/embed/hDkVQvhZx04?rel=0" frameborder="0" allowfullscreen></iframe>에서...
width="640" height="480"
를
width="100%" height="auto"
로 바꾸거나 삭제하면 되지않을까도 싶네요.
그런데, 게시판 화면에 꽉 차면... 너무 커서 부담스럽더군요.
11년 전
좋은 정보감사합니다
10년 전
감사합니다^^
내가미쵸뜨벌
9년 전
아미나 빌더사용중인데요... 적용이되진않는거 같은데요... 봐주실수있을까요???
초보제작자
9년 전
이건 매번 테마를 변경하거나 할때마다 찾게 되네요 ㅎㅎㅎ
감사합니다 ^^
감사합니다 ^^
7년 전
아미나 빌더 사용중인데, 안 되네요.
6년 전
감사합니다.
6년 전
스크랩합니다.
HeeKwonKIM
5년 전
아미나 빌더 사용중입니다. 작동은 되는데 글 수정을 클릭하게되면 내용이 보이지 않게 사라져 버립니다. 꼭 필요한 기능인데 방법이 없을꺄요?
5년 전
홈페이지 동영상 사이즈 관련해서 문제가 있어 우연히 글쓴이님의 글을 읽고 다 따라해 봤습니다. 그런데도 문제가 해결되지 않는데 뭐가 잘못된 것일까요?
동영상 파일을 모바일에서 창 크기에 맞춰서 출력하기 1,2번의 내용 전부 따라해봤습니다.
서버에 업데이트 되어 적용되는게 시간이 조금 걸리나요?
저희 홈페이지 테스트 영상 주소 입니다. 혹시 시간 괜찮으시다면 한번 봐주실 수 있으십니까?
http://memsystem.co.kr/bbs/board.php?bo_table=portfolio_exhibition&wr_id=241
동영상 파일을 모바일에서 창 크기에 맞춰서 출력하기 1,2번의 내용 전부 따라해봤습니다.
서버에 업데이트 되어 적용되는게 시간이 조금 걸리나요?
저희 홈페이지 테스트 영상 주소 입니다. 혹시 시간 괜찮으시다면 한번 봐주실 수 있으십니까?
http://memsystem.co.kr/bbs/board.php?bo_table=portfolio_exhibition&wr_id=241
1년 전
오...width 지정되어 있어도 가로 넘어가 버리는 현상있었는데 해결되었습니다!
1년 전
@에단 전 왜 안될까용. ㅠ.ㅠ
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 595 | 9년 전 | 12208 | ||
| 594 | 9년 전 | 11794 | ||
| 593 | 9년 전 | 7757 | ||
| 592 | 9년 전 | 9267 | ||
| 591 | 9년 전 | 5744 | ||
| 590 | 9년 전 | 6582 | ||
| 589 | 9년 전 | 7692 | ||
| 588 | 9년 전 | 10032 | ||
| 587 | 9년 전 | 6213 | ||
| 586 |
 Romancia |
9년 전 | 11853 | |
| 585 | 9년 전 | 20002 | ||
| 584 |
병원에서일해요
|
9년 전 | 12044 | |
| 583 | 9년 전 | 10142 | ||
| 582 | 9년 전 | 6114 | ||
| 581 | 9년 전 | 11505 | ||
| 580 | 9년 전 | 7333 | ||
| 579 |
sahara
|
9년 전 | 6629 | |
| 578 |
 thisgun |
9년 전 | 16917 | |
| 577 |
 oldccc |
9년 전 | 8021 | |
| 576 |
oldccc |
9년 전 | 8754 | |
| 575 |
oldccc |
9년 전 | 9310 | |
| 574 |
병원에서일해요
|
9년 전 | 6993 | |
| 573 | 9년 전 | 17189 | ||
| 572 | 9년 전 | 9593 | ||
| 571 | 9년 전 | 7405 | ||
| 570 | 9년 전 | 8770 | ||
| 569 | 9년 전 | 6737 | ||
| 568 | 9년 전 | 17232 | ||
| 567 | 9년 전 | 18438 | ||
| 566 | 9년 전 | 9388 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기