게시판 – Youtube 자동 리사이즈 기능 넣기

기본적인 유투브 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>

 


 

적용을 하게 되면 아래처럼 나타나게 됩니다.

스크린샷 2017-11-08 오후 11.32.49.png

<리사이즈 적용 전>

 

스크린샷 2017-11-08 오후 11.33.17.png

<리사이즈 적용 후>

 

본문을 벗어나거나 너무 작게 영상이 존재할때 자동으로 너비(width)에 맞게 조절해줍니다.

댓글 남기기