기본적인 유투브 iFrame 코드의 영상을 리사이즈 해주는 기능입니다.
유투브 리사이즈 기능은 구글 검색 해보시면 다양한 방법들이 존재합니다.
그중에서도 이 곳과 잘 맞는 코드를 알려드리고자 합니다.
(해당 기능은 사용환경에 따라 적용이 안될 가능성이 있습니다)
기본(default) 스킨을 기준으로 설명합니다.
1. 게시판 전체 적용
board.default.js 파일내에 아래의 코드를 넣어줍니다.
$(window).resize(function(){resizeYoutube();});
$(function(){resizeYoutube();});
function resizeYoutube(){ $(“iframe”).each(function(){ if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr(“src”)) ){ $(this).css(“width”,”100%”); $(this).css(“height”,Math.ceil( parseInt($(this).css(“width”)) * 480 / 854 ) “px”);} }); }
2. 글 읽기 시에만 적용
_read.html 상단에 아래의 코드를 넣어줍니다.
<script type=”text/javascript”>
$(window).resize(function(){resizeYoutube();});
$(function(){resizeYoutube();});
function resizeYoutube(){ $(“iframe”).each(function(){ if( /^https?:\/\/www.youtube.com\/embed\//g.test($(this).attr(“src”)) ){ $(this).css(“width”,”100%”); $(this).css(“height”,Math.ceil( parseInt($(this).css(“width”)) * 480 / 854 ) + “px”);} }); }
</script>
적용을 하게 되면 아래처럼 나타나게 됩니다.
<리사이즈 적용 전>
<리사이즈 적용 후>
본문을 벗어나거나 너무 작게 영상이 존재할때 자동으로 너비(width)에 맞게 조절해줍니다.