답변 2개
채택된 답변
+20 포인트
아르키어드5년 전
최근 해상도는 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개
�
아르키어드
5년 전
youtubeWrapper 요놈이 width 100%인데 이놈의 부모가 width값이 고정으로 잡혀있다면 아마 안되겟죠..전체적인 부모 css도 좀더 봐야 문제점이 뭔지 알거같네유
댓글을 작성하려면 로그인이 필요합니다.
DSLOVE5년 전
</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>제가 즐겨쓰는 코드입니다. 적용해보세요~~
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인전체 질문 목록
답변대기
채택
채택
채택
채택
채택
채택
답변대기
채택
채택
채택
답변대기
채택
채택
답변대기
채택
채택
채택
채택