유튜브 반응형 동영상 삽입

<script type="text/javascript">
resizeYoutube();
  $(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>
<iframe width="854" height="480" src="https://www.youtube.com/embed/a4IosLAbLXY" frameborder="0" allowfullscreen=""></iframe>

출처
http://sometimes-n.tistory.com/42

다 필요 없다...
<div class="videoArea">
<iframe></iframe>
</div>
.videoArea{position:relative;width:100%;height:0;padding-bottom:56.25%;}
.videoArea iframe {position:absolute;top:0;left:0;width:100%;height:100%;}

댓글

댓글 쓰기

이 블로그의 인기 게시물

[iOS] body 스크롤 막기

.scrollOff{position:fixed;overflow:hidden;height:100%;} // body 스크롤 막음 function scrollOff(){    $('body').addClass('scrollOff').on('scroll touchmove mousewheel', function(e){       e.preventDefault();    }); } // body 스크롤 풀기 function scrollOn(){    $('body').removeClass('scrollOff').off('scroll touchmove mousewheel'); } 지인에게 받은 팁...iOS때문에 여러사람들 고생하네...
자세한 내용 보기

[html] 모바일웹 작업 팁 정리중...

1. 가로/세로 전환시 폰트 고정 -webkit-text-size-adjust:none; viewport에서 maximum-scale가 있어야 하고 값이 1.0일때만 반응. 2. viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" /> 3. 상단 url바 숨기기 <script type="text/javascript"> window.addEventListener("load",function(){  setTimeout(scrollTo,0,0,1);  },false); </script> 4. 전화번호 기능 <a href="tel:000-0000-0000">전화걸기</a> <a href="sms:000-0000-0000">문자보내기</a> <a href="sms:">문자보내기 실행</a> 5. 키보드 호출 <input type="text" /> <input type="search" /> <input type="tel" /> <input type="url" /> <input type="email" /> <input type="time" /> <input type="number" /> <input type="datetime"
자세한 내용 보기

Swiper lazyLoading

최신 버전 Swiper lazy Loading는 지금 사이트에서 보면 된다. https://idangero.us/swiper/api/ 하지만 구버전 일단 지금 사이트에서 사용하고 있는 버전이 3.4.0버전인데 옵션들이 좀 많이 달라서 검색에 애를 먹고 있다. 결과적으로 찾고 찾아서  lazyLoading: true, lazyLoadingInPrevNext: true, watchSlidesProgress: true, watchSlidesVisibility: true 이렇게 사용하면 됨. 구 버전 API만 모아놓은데 어디 없으려나... 더 찾아 볼걸 여기에 있구나 https://github.com/nolimits4web/Swiper/blob/Swiper3/API.md
자세한 내용 보기