포럼
혹시라도...
2014.02.04 09:01
안녕하세요. 가입하고 처음 글 올려보네요.
홈페이지에서 xe 열심히 사용하고 있어 들어오다가 뭔가 도움이 될까하여 가입하고 비번 여러번 틀려서 정지 먹고 겨우... ㅎㅎ
혹시라도 필요하신 분 계실까 해서 파일 올려봅니다.
부트스트랩으로 만든 게시판 스킨 같은걸 올려보고 싶었는데
다른 레이아웃을 쓰면 완전 엉망이 되길래 배포하면 안되겠구나 싶어서 대신 다른걸!!
유튜브 컴포넌트고요. 제 홈페이지에서 테스트해보긴 했는데 무슨 에러가 있을지 모릅니다. --;
그냥 html 만 간신히 아는 수준이라서 제가... ㅎㅎ
컴포넌트 만들때도 multimedia를 youtube로 모두 치환하고 걍 유튜브 소스를 html로 때려박는 식으로 만들었습니다.
자랑스러운 삽질의 기록. 그렇지만 돌아가는게 기뻐서 올려봅니다.
그러니 잘 아시는 많은 다른 분들이 수정 좀 해주시면 완전 좋겠습니다.
좋은 점이라면 게시판이나 코어를 수정하지 않아도 이걸로 올리면 자동으로 유튜브 섬네일이 들어간다는 것 정도? ㅡㅡ;
/modules/editor/components/ 에 넣으시고, 관리 > 고급 > 에디터에서 켜신 후에...
글쓰실때 에디터의 확장 컴포넌트에서 사용하시면 됩니다!
멀티미디어 컴포넌트를 수정해서,
유튜브 동영상의 ID나 경로 (공유 누르면 바로 나오는), 또는 주소창의 주소를 넣으면
자동으로 제일 좋은 해상도의 유튜브 영상이 들어가고, 섬네일이 나옵니다 (섬네일이 본문에는 안 보입니다) !!
소스 보시면 아시겠지만 그냥 대충 만든 수준입니다. 꼼수를 써서.. ㅎㅎ
뭐에 쓰이는지 몰라서 남겨둔 거나 몰라서 삭제한 소스도 있고...
그러니 역시 잘 아시는 많은 다른 분들이 수정 좀 해주시면 완전 좋겠습니다!! 수정 재배포 완전 원해요.
참고로, 레이아웃 css에 다음 소스를 추가해주시면 이 컴포넌트를 쓰셔서 올린 유튜브 영상이
동영상 크기를 지정하시지 않아도 게시판 폭에 맞춰서 자동으로 크기가 커졌다 줄어들었다 할겁니다.
다른 영상(멀티미디어링크 등으로 올린) 도
<div class="video-container"></div> 로 해당 소스를 감싸주시면 역시 동일하게 반응할거고요!
이 소스도 어딘가에서 퍼온 ...
video {display:inline-block; width:auto\9 !important; /* ie8 */ width:auto !important; max-width:100%; min-width:100%; height:auto !important;}
.video-container {position:relative; height:0; padding-top:30px; padding-bottom:56.25%; overflow:hidden; z-index:1;}
.video-container iframe,.video-container object,.video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
--------------------------
youtube_link.zip는 동영상 크기 조절이 가능한 파일이고,
youtube_link_100%.zip은 게시판 크기에 꽉 차게 동영상크기가 변하는 파일이니 원하시는 걸로 받으세요~
댓글 28
-
socialskyo
2014.02.04 10:03
-
socialskyo
2014.02.04 10:14
그런데 어차피 경로를 복사해야 하는데....전체 주소를 카피해서 사용할수 있게 하면 안될려나요? id만 복사 하기가 조금 더 불편한 느낌이 들긴 합니다. ^^
-
foret
2014.02.04 11:39
말씀하신대로 고쳐보았는데... 확인해보니 저는 잘 나옵니다만 다른 분들은 어떨지 모르겠네요. ㅎㅎ
-
socialskyo
2014.02.04 11:49
테스트를 위해 해볼려고 하니...뭔가 저는 잘못 되었는지 삽입 버튼이 눌러지질 않습니다.
-
foret
2014.02.04 12:03
레이아웃, 게시판스킨, 애드온 문제인가 하고 제가 가지고 있는 모든걸 껐다 켰다했는데 잘 모르겠네요.
혹시나 해서 한가지 수정해봤는데 되는지 확인 부탁드립니다 ^^
-
socialskyo
2014.02.04 12:14
이 파일로도 안되네요. ^^; 기존 파일에 php파일만 바꿔치기 한놈으로 하니 잘됩니다.
신기하네요. youtu.be 주소랑 일반 주소랑 모두 다 인식하네요. 대단하십니다!!
-
foret
2014.02.04 12:15
감사합니다 ㅋㅋ 되는 파일 올려주세요! ㅎㅎ
-
socialskyo
2014.02.04 12:24
엌...회사에서 파폭인데...여기 공홈이 저는 407 파일 첨부 에러가 나서....업로드가 안되고 100%에 멈춰 있습니다...흑..
저녁에 퇴근하고 바로 올리겠습니다~~...(그냥 youtube_link.class.php 파일만 바꾼거라서.......) -
socialskyo
2014.02.04 12:26
그나저나 이거 뭐죠? id만 넣어도 되네요? 동시에다 되게 하신거에요? 우왕!!! 대tothe박!!
최종 소소한 차이점 업데이트 드립니다.
id만 삽입시 : preview가 보입니다. 글저장시 마찬가지 정상적으로 보입니다.
주소 삽입시 : preview는 안보입니다만, 글저장을 누르면 정상적으로 보입니다.
결론 우왕굳!
-
socialskyo
2014.02.04 16:50
그나저나 foret님 모바일에서 링크를 열면 동영상이 안보이는데 정상인건지요?
-
foret
2014.02.04 17:04
아 맞다. embed 라서 ..); 그렇군요. 고민해볼게요!
-
socialskyo
2014.02.04 17:11
아..그럼 현재까지 저도 정상이군요^^. foret님 자료까지 올려주시고 의견 까지 들어주셔서 고맙습니다. !!
저는 까막눈이라 잘모르겠지만 혹시나 해서 링크 걸어 봅니다.
확장 변수를 이용해서 id를 받아서 하는 게시판의 소스인데, 이놈은 모바일에서 나오더라고요.. 물론 foret님이 올려주신 방법은 id뿐만아니라 전체 주소도 되고, 최대 해상도를 자동 판별하니까... 더 복잡 할테지만요...혹시 참고가 될까 해서 찾아서 올려봅니다.
---
<!-- 유투브 -->
{@
$extras = $oDocument->getExtraVars();
$youtube_url = $extras[1]->value;
}
<iframe class="youtube-player" type="text/html" width="640" height="480" src="{str_replace('http://youtu.be/', 'http://www.youtube.com/embed/',$youtube_url)}?rel=0&wmode=opaque" frameborder="0" allowfullscreen="true"></iframe>
<!--// 유투브 --> -
socialskyo
2014.02.04 17:17
요건 섬네일 처리 참고용
<block cond="$document->getExtraValueHTML(1)"><span cond="$mi->tmb_effect=='2'" class="no_img loading"></span><img class="tmb" src="{str_replace('http://youtu.be/', 'http://img.youtube.com/vi/', $document->getExtraValueHTML(1))}/0.jpg" width="{$mi->zine_thumb_width}" height="{$mi->zine_thumb_height}" border="0" alt="" /></block>
http://www.xpressengine.com/qna/22209544
http://eond.com/index.php?mid=xe_forum&document_srl=348092
-
foret
2014.02.04 17:18
ㅎㅎ 소스를 아이프레임 형식으로 다시 바꿨어요~ 저는 됩니다. 제 방법이 훨씬 훨씬 간단하고 조잡합니다. -_- 그냥 소스 짬뽕이라서요. 그리고 제가 브라우저 바꿔서 다 해봤는데 파폭만 안 되는 거 같아요. 한번 받아서 실험 부탁드릴게요. ㅋ_ㅋ
-
foret
2014.02.04 17:29
동영상이 게시판 크기에 맞춰 자동으로 커지게 한 파일입니다. 기능 필요없으시면 앞에거 쓰심 돼고요. ㅎㅎ
-
socialskyo
2014.02.04 17:43
대박입니다. test 완료입니다. 모바일에서도 다 잘되네요.
그런데 이미 원래 지정된 해상도보다 더 큰 해상도를 가지고 있으면
지정된 해상도 보다 더 큰 해상도로 노출 되게 되어 있지 않았었나요?
이 것은 위 조건을 무시하고 추가로 게시판 크기에 맞춰 주는 건가요?
-
foret
2014.02.04 17:46
네 아래 파일은 동영상 크기를 게시판 크기에 맞춰주는거구, 해상도는 유튜브 동영상 설정에서 제일 고화질로 보이게 되어 있을겁니다!
-
socialskyo
2014.02.04 17:47
와.!! 감사합니다. 잘 알겠습니다. 최종 마지막 것을 사용하면 되겠네요!
-
socialskyo
2014.02.04 17:50
마지막으로 하나만 더 질문할게요. 그렇다면 사실상 사이즈 지정은 무의미 하겠네요? 삭제해도 괜찮겠지요?
예를 든다면 사이즈 지정 했는데 다르게(크게?) 나온다고 할 소지도 있으니까요. 무조건 게시판 사이즈에 맞춰집니다만 공지 해놓을려고요.
-
foret
2014.02.04 17:57
예 사이즈 지정은 무의미합니다!
그런데 코드중에 어디를 삭제하면 어떻게 될지 제가 잘 아는게 아니라서... --;
어디를 어떻게 고치시라고는 말씀드릴 수가 없네요. ㅎㅎ
이쪽저쪽 열심히 삭제해봤는데 에러떠요! ㅋㅋㅋㅋ
-
socialskyo
2014.02.04 18:03
아.~~ 그렇군요^^. 최종 올려주신것으로 잘되니까..혹시나 제가 사이즈 지정 삭제하고도 잘되면 제것을 차후에 올려 보도록 할게요. 감사합니다.
ps. 자료실에 올리시는 것을 추천 드려봅니다. 아니면 제목을 바꿔서 검색이 잘되도록 하는 것도.^^;
다시한번 좋은 자료 감사 드립니다.
-
foret
2014.02.04 18:06
자료실 등록... 못하는 늅늅이라서요. 하하!
-
KANTSOFT
2014.02.04 11:48
요즘 부트스트랩 레이아웃도 많아지고, 부트스트랩을 기반으로 하는 모듈도 가지고 있긴해서.. 게시판도 공유해주심 좋을것같기도 합니다.
-
foret
2014.02.04 14:45
게시판 스킨입니다. ㅎㅎ
그렇지만 레이아웃 사용시 css가 겹쳐서 이상하게 나오는 등등등의 문제가 있고 아직 수정되지 않은 부분들이 있어서 안 예쁜 곳이 군데군데 있습니다!
제가 개인적으로만 사용해서 기능이 완전 단순하고요. 갤러리형 게시판에서 사진이 비교적 자연스럽게 커졌다 작아졌다 하는 정도의 기능만 있습니다. 모바일일때 사진이 틀 밖으로 안나가고 100%로 커진다는 거랑.... 별 쓸모는 없어요. 걍 제가 편해서 만든...버그가 뿜어져 나올겁니다!
-
CTN
2014.02.04 18:56
잘 사용하겠습니다.
-
나뚜르
2014.02.04 20:05
이렇게 하면 유튜브 썸네일 문제가 한번에 해결되네요! 고맙습니다.
-
socialskyo
2014.03.07 17:20
갑자기 또 생각나서 들렀습니다. 다시한번 좋은 자료 감사 드립니다. ^^
-
Omega3
2014.03.07 22:19
한 번 이용해볼게요.
좋은 자료 공유 매우 고맙습니다~ ▒
허허허헉.......대박!! 감사합니다.