테스트 사이트 - 개발 중인 베타 버전입니다

모바일 iframe 채택완료

초초동 4년 전 조회 2,101

모바일에서 iframe으로  youtube 를 넣으면 

모바일에서 넘치는? 상황이 많아서 

 

 

/* 제품 상세내에 유튜브 */

.youtube_video {margin-top:20px;position: relative;width: 100%;padding-bottom: 56.25%;}

.youtube_video iframe {position: absolute;width: 100%;height: 100%;left:0;top:0}

 

이렇게 해서 

되기는 하는데...

 

제가 올릴때는 괜찮은데 고객들이 

올릴경우에는

올릴수 없으니 ㅠㅠㅠ

 

뭔가 해결방법이 없을까요?ㅜ

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

답변 1개

4년 전

자문 자답

</p>

<pre>
$(document).ready(function() {
   if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
      YOUTUBE_VIDEO_MARGIN=5;
   }
   $('iframe').each(function(index,item) {
      if($(item).attr('src').match(/(https?:)?\/\/www\.youtube\.com/)) {
         var w=$(item).attr('width');
         var h=$(item).attr('height');
         var ar = h/w*100;
         ar=ar.toFixed(2);
         //Style iframe
         $(item).css('position','absolute');
         $(item).css('top','0');
         $(item).css('left','0');
         $(item).css('width','100%');
         $(item).css('height','100%');
         $(item).css('max-width',w+'px');
         $(item).css('max-height', h+'px');
         $(item).wrap('<div style="max-width:'+w+'px;margin:0 auto; padding:'+YOUTUBE_VIDEO_MARGIN+'px;" />');
         $(item).wrap('<div style="position: relative;padding-bottom: '+ar+'%; height: 0; overflow: hidden;" />');
      }
   });
});</pre>

<p>

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

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

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

로그인