테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

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

whitetoto 5년 전 조회 3,438
답변 2
목록

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

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

#그누보드5 #반응형 #유투브
댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
아르키어드

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

그래서 저는 

</p>

<p><div id="youtubeWrapper"></p>

<p>  <iframe src="유튜브 주소" id="youtubeFrame"></p>

<p></div></p>

<p> </p>

<p><style></p>

<p>#youtubeWrapper{position:relative; width:100%; padding-bottom:56%;}

#youtubeFrame {positioan:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}</p>

<p></style></p>

<p>

 

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

w
whitetoto
5년 전
반응형으로 작동이 안되는데요 ㅠㅠ
�
아르키어드
5년 전
youtubeWrapper 요놈이 width 100%인데 이놈의 부모가 width값이 고정으로 잡혀있다면 아마 안되겟죠..전체적인 부모 css도 좀더 봐야 문제점이 뭔지 알거같네유

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

D
DSLOVE
5년 전

</p>

<p><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code></p>

<p><code>  </code><code>$(window).resize(function(){resizeYoutube();});</code></p>

<p><code>  </code><code>$(function(){resizeYoutube();});</code></p>

<p><code>  </code><code>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");} }); }</code></p>

<p><code></</code><code>script</code><code>></code></p>

<p>

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

로그인 후 평가할 수 있습니다

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

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

로그인