묻고답하기
iframe 삽입시 자동으로 div 코드로 감싸고 싶습니다.
2014.11.26 02:49
반응형으로 홈페이지를 제작하고 있는데요.
유튜브 동영상 iframe 으로 입력시, 기존 애드온들은 가로폭은 잡아주는 반면, 세록폭을 놓쳐서 아예 div로 감싸는 방법을 생각중입니다.
<iframe sir"~"></iframe> 이런식으로 유튜브 소스를 입력한다고 했을 때,
<div class='youtube'>
<iframe sir"~"></iframe>
</div>
형태로 자동으로 감싸주면 CSS에서 반응형 코드를 넣으면 될 거 같은데요.
좋은 방법이 없을까요?
댓글 15
-
하얀마법
2014.11.26 12:30
<head> <style> .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <div class="video"> <iframe width="640" height="390" src="http://youtubeLink.com/x/x/x" frameborder="0" allowfullscreen=""></iframe> </div>
DIV CSS로 16:9 비율을 맞추면 됩니다.Iframe 감싸는 방법이 있을까요?
-
저에게 새로운 새계를 보여주셨습니다.
이건 상상도 못한 방식인데....
넘 감사합니다.
그래서 열심히 답변을 찾아 봤습니다.
<script>
jQuery(function($){
$( "iframe" ).wrap( "<div class='video'></div>" );
});
</script>
이렇게 한번 해 보세요. 테스트상으로는 문제 없는데....
혹 안되면 글 남기시고요.
video {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}.video iframe, .video object, .video embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}이 방식 너무 쌈박합니다. ㅋㅋㅋ다른 용도로도 많이 사용될거 같습니다.padding-bottom 값이 넓이 기준으로 잡힐거라고는 생각도 못해봤는데... -
몽실아빠
2014.11.26 14:27
오~~ 이거 좋네요. 기존 애드온은 가로*세로를 픽스해서 무조건 작은 사이즈밖에 안되었는데 이거는 스마트폰 가로로 보거나 넓은기기에서는 더 크게 볼 수 있네요.
-
하얀마법
2014.11.26 14:41
방법을 찾아주셨군요. 감사합니다. ^^
스케치북5 게시판에 넣어봤는데 소스에서는 적용이 안되네요.
혹시 적용 소스도 부탁드리면 안될까요?
그리고 킴스큐에서는
<script>jQuery(document).ready(function(){jQuery('#vContent').find('object').add('iframe').add('embed').wrap('<div class="video-container"></div>');});</script>이런식으로 embed 태그도 함께 처리를 해주는데 이것도 좋은 방법인 것 같습니다.
-
게시판에 직접 동영상 코드를 넣는 방식으로 테스트를 했고요
그 상황에서 _read.html 상단에
<style>
.video {
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
}
.video iframe, .video object, .video embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
</style>
<script>
jQuery(function($){
$( "iframe" ).wrap( "<div class='video'></div>" );
});
</script>
를 넣었을때 잘 돌아가는거 같습니다.
-
몽실아빠
2014.11.26 16:12
jQuery(function($){
$( "iframe, embed" )
요것도 가능한가요 ? 일단 사이즈는 줄어들던데요...
-
몽실아빠
2014.11.26 16:16
제가 사용하는 모바일스킨에서는 스킨차원에서 리사이즈를 제공했었는데 가로세로 사이즈를 고정해 버리는 방식이라 스크립트파을 지금 알려주신거로 교체해 버렸습니다 ㅋ
-
노에르
2014.11.26 17:04
필요에 의해 만든 건데요..
유용하게 쓰시길....^^
참고로 적용하면 이렇게 됩니다.
http://anizen.kr/freeboard/153265?category=130822&page=2 (창크기를 조절해보세요)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head> <body> <script> (function($) { var res; $(document).ready(function(){ resizeTarget(); }); $(window).resize(function(){ if(res) clearTimeout(res); res = setTimeout(function(){resizeTarget()},300); }); function resizeTarget(){ IframeResize('iframe'); } function IframeResize(target){ var xe_content = $('.xe_content'); xe_content.each(function(){ var $iframe = $(this).find(target); if($iframe.length < 1) return; $iframe.each(function(){ var bwidth, bheight, _w, _h, framesize, per; _w = $(this).width(); _h = $(this).height(); if(!$(this).attr('data-width')){ $(this).attr('data-width', $(this).width()); } if(!$(this).attr('data-height')){ $(this).attr('data-height', $(this).height()); } bwidth = $(this).attr('data-width'); bheight = $(this).attr('data-height'); framesize = $(this).closest('.xe_content').width(); per = framesize / bwidth; if(framesize < _w){ $(this).animate({width:framesize,height:bheight*per},{duration:400,queue:false}); }else if(framesize < bwidth){ $(this).animate({width:framesize,height:bheight*per},{duration:400,queue:false}); }else if(framesize > bwidth){ $(this).animate({width:bwidth,height:bheight},{duration:400,queue:false}); } }); }); } }) (jQuery); </script> </body> </html> -
하얀마법
2014.11.27 03:44
운영하시는 사이트가 시원시원하네요..
정말 좋은 팁 감사합니다. ^^
-
노에르
2014.11.29 16:20
자체제작한 멀티미디어 컴포넌트에 포함된 소스다 보니
data-width와 date-height 정의에 대한 부분이 없었네요...
해당 부분을 체크하여 해당 값이 없을 때 최초 1회 추가하도록 수정하였습니다.
(추가된 이유는 다음과 같습니다. 최초 창사이즈를 기억하여, 그 사이즈 이상으로 커지지 않게 하기 위함입니다.)
추가된 부분은
if(!$(this).attr('data-width')){
$(this).attr('data-width', $(this).width());
}
if(!$(this).attr('data-height')){
$(this).attr('data-height', $(this).height());
}입니다. (기존 댓글에 입력한 코드 수정함)
참고로 css로 사이즈를 조절하는 부분이 있다면 제대로 작동하지 않을 수 있습니다.
(max-width 값을 지정해둔다거나..)
-
하얀마법
2014.11.29 17:59
친절한 설명 감사드립니다. ^^
저도 소스 적용하고 포기하고 있다가, 노에르님 사이트를 보니 에디터 컴포넌트로 입력된 게 보여서 해당 소스에서 해당 부분 소스를 처리했더니 너무 이쁘게 잘 되고 있습니다.
정말 귀한 소스를 공유해 주셔서 감사드립니다.
-
하얀마법
2014.11.28 23:55
DIV로 조정하는 것은 IE에서의 호환성 문제로 포기하고, 노에르님의 소스를 통해서 해결했습니다.
저 같은 경우에는 구글 애드센스와의 충돌이 문제가 되더군요.
이 소스는 모든 브라우져에서 충돌없이 잘 되는 것 같습니다.
익스 11과 파이어폭스, 크롬에서 테스트 했고, 아이폰에서도 잘 작동됩니다. ^^
감사합니다.
위 소스에서 사이트 배치에 구글광고가 들어가서 초기 사이즈는 560*340으로 고정하고 이후에는 반응이 되도록 했습니다.
적용법 안내 - http://zzandoli.com/3179
적용샘플 - http://zzandoli.com/3012
-
하얀마법
2014.11.27 05:51
윗분들 덕분에 잘 해결하였습니다. ^^
감사합니다.
저 같은 경우엔 구글 광고와의 배치 때문에 좀더 잔머리를 굴려야 했는데 잘 해결 되었습니다.
http://zzandoli.com/3012
구글 광고와도 잘 매칭이 되고, 반응형에도 잘 반응합니다. ^^
-
하얀마법
2014.11.28 23:56
이 소스는 문제가 있어서 폐기합니다.
이건 div로 감싸고 말고의 의미가 없습니다.
div 자체가 높이를 자동조절을 해주는건 아니니까요.