게시판 내용에 유투브를 반응형(responsive) 유트부로 삽입하는 방법이?
본문
게시판 내용에 유투브를 반응형(responsive) 유트브로 삽입하는 방법이 없나요 ?
구글검색해 살펴보면 아이프레임 사용하여 삽입하고 <style> ..... </style>로 코드삽이하고 어쩌고 하던데요.....
답변 2
최근 해상도는 16:9 비율에 맞춰서 작업을 하기때문에 대충 width값에 비례해서 여백값이 56% 정도됩니다.
그래서 저는
<div id="youtubeWrapper">
<iframe src="유튜브 주소" id="youtubeFrame">
</div>
<style>
#youtubeWrapper{position:relative; width:100%; padding-bottom:56%;}
#youtubeFrame {positioan:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
</style>
이렇게 저는 작업하는 편이네요
반응형으로 작동이 안되는데요 ㅠㅠ
youtubeWrapper 요놈이 width 100%인데 이놈의 부모가 width값이 고정으로 잡혀있다면 아마 안되겟죠..전체적인 부모 css도 좀더 봐야 문제점이 뭔지 알거같네유
<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>
제가 즐겨쓰는 코드입니다. 적용해보세요~~
답변을 작성하시기 전에 로그인 해주세요.