이전 목록 다음
채택완료

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

whitetoto
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-04-23 (목) 10:29:22 3,709

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

구글검색해 살펴보면 아이프레임 사용하여 삽입하고  <style> ..... </style>로 코드삽이하고   어쩌고 하던데요.....

그누보드5 반응형 유투브
|

답변 2개 / 댓글 2개

채택된 답변
+20 포인트
아르키어드
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-04-23 (목) 10:34:03

최근 해상도는 16:9 비율에 맞춰서 작업을 하기때문에 대충 width값에 비례해서 여백값이 56% 정도됩니다.

그래서 저는 

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

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

답변에 대한 댓글 2개

whitetoto
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-04-23 (목) 10:52:28
반응형으로 작동이 안되는데요 ㅠㅠ
아르키어드
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-04-24 (금) 08:37:34
youtubeWrapper 요놈이 width 100%인데 이놈의 부모가 width값이 고정으로 잡혀있다면 아마 안되겟죠..전체적인 부모 css도 좀더 봐야 문제점이 뭔지 알거같네유
DDSLOVE
프로필 보기이 회원 글보기이 회원의 댓글보기
 2020-04-23 (목) 11:21:02
Copy 
<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>

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

답변을 작성하려면 로그인이 필요합니다.