게시판 내용에 유투브를 반응형(responsive) 유트부로 삽입하는 방법이?

게시판 내용에 유투브를 반응형(responsive) 유트부로 삽입하는 방법이?

QA

게시판 내용에 유투브를 반응형(responsive) 유트부로 삽입하는 방법이?

답변 2

본문

게시판 내용에 유투브를 반응형(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>

 

이렇게 저는 작업하는 편이네요


<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>

제가 즐겨쓰는 코드입니다.  적용해보세요~~

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 39
© SIRSOFT
현재 페이지 제일 처음으로