유튜브 영상 크기 조절 문의 드립니다.
본문
반응형 홈페이지 게시판에서 유투브 영상을 그대로 소스를 삽입하면 모바일에서는 그대로 크게 보여 집니다. 이렬 경우 해결 방안이 있는지 궁금합니다.
답변 2
<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>
위와 같은 방법도 있습니다!
구글링해서 찾은 스크립트이며 메모장에 적어두고 쓰고 있는거 알려드려요 ㅎㅎ
반응형에서 동영상 처리
1. HTML부문
iframe을 먼저 div으로 감쌉니다.
<div class="videoWrapper">
소스코드.... iframe으로 되어 있는... (예:<iframe src="https://player.vimeo.com/video/244630454" width="640" height="480" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>)
</div>
2. CSS부문
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
너무 감사드려요!
