유튜브 동영상 반응형으로 넣기 > 기술자료

본문 바로가기
사이트 내 전체검색

기술자료

HTML 유튜브 동영상 반응형으로 넣기


페이지 정보

댓글 0건 조회 653회 작성일 2018-07-17 18:38 ~ 2019-01-08 17:55

본문

동영상 파일을 모바일에서 창 크기에 맞춰서 출력하는 방법입니다.


1. 소스 코드 복사 기능을 활용하기
<div style="position:relative;height:0;padding-bottom:56.25%"><iframe src="https://www.youtube.com/embed/유튜브동영상아이디?rel=0&amp;showinfo=0" style="position:absolute;width:100%;height:100%;left:0" width="640" height="360" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>


2. css 코드 활용하기
<style>
.youtubeWrap{
    position: relative;
    height: 0;
    padding-top: 0px;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.youtubeWrap iframe,.youtubeWrap object,.youtubeWrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="youtubeWrap"> 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/튜브동영상아이디?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>


3. jQuery 활용하기
유튜브 동영상을 넣을 때마다 코드를 수정하는 것이 번거롭다면 jQuery를 이용하여 자동으로 적용되도록 할 수 있습니다.
$( 'iframe[src^="https://www.youtube.com/"]' ).wrap( '<div class="youtubeWrap"></div>' );
유튜브를 소스로 하는 iframe이 있다면 youtubeWrap을 클래스 값을 가지는 div로 감싸라는 뜻입니다.

<style>
.youtubeWrap{
    position: relative;
    height: 0;
    padding-top: 0px;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.youtubeWrap iframe,.youtubeWrap object,.youtubeWrap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<iframe width="560" height="315" src="https://www.youtube.com/embed/튜브동영상아이디?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

<script>
jQuery( document ).ready( function( $ ) {
    $( 'iframe[src^="https://www.youtube.com/"]' ).wrap( '<div class="youtubeWrap"></div>' );
} );
</script>



관련자료
https://sir.kr/g5_tip/1733
https://www.cmsfactory.net/node/20765
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

Total 2,323건 1 페이지

기술자료 목록
번호 제목
공지 일반   16901  2001-08-31 11:52 ~ 2017-12-05 16:33  
2322 그누보드   6  2019-02-16 01:51 ~ 2019-02-16 19:39  
2321 PHP   18  2019-02-13 21:01  
2320 JavaScript   103  2019-02-08 18:37 ~ 2019-02-08 19:32  
2319 그누보드   119  2019-02-08 16:47 ~ 2019-02-08 16:54  
2318 그누보드   161  2019-01-31 18:45 ~ 2019-01-31 18:52  
2317 PHP   152  2019-01-31 18:26 ~ 2019-01-31 18:38  
2316 PHP   212  2019-01-23 17:50  
2315 PHP   197  2019-01-23 15:38  
2314 etc보드   207  2019-01-22 23:32  
2313 MySQL   219  2019-01-22 00:43  
2312 Linux   196  2019-01-21 15:38  
2311 Linux   219  2019-01-21 07:18  
2310 그누보드   178  2019-01-16 18:41 ~ 2019-01-17 19:01  
2309 etc쇼핑몰   176  2019-01-15 04:30 ~ 2019-01-28 00:30  
2308 etc보드   157  2019-01-15 04:26 ~ 2019-01-15 05:04  
2307 HTML   228  2019-01-11 23:20 ~ 2019-01-11 23:24  
2306 그누보드   181  2019-01-11 01:42 ~ 2019-01-11 01:43  
2305 호스팅   286  2019-01-09 08:50  
2304 그누보드   358  2019-01-01 23:07  

게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
435
어제
1,453
최대
3,306
전체
4,601,463

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2019 해피정닷컴. All Rights Reserved.