[모바일] 유튜브 동영상 반응형으로 넣기 (폭 100%로 보이기) > 기술자료 | 해피정닷컴

[모바일] 유튜브 동영상 반응형으로 넣기 (폭 100%로 보이기) > 기술자료

본문 바로가기

사이트 내 전체검색

[모바일] 유튜브 동영상 반응형으로 넣기 (폭 100%로 보이기) > 기술자료

HTML [모바일] 유튜브 동영상 반응형으로 넣기 (폭 100%로 보이기)

페이지 정보


본문

PC에서의 유튜브 영상을 모달창으로 열기 : https://www.happyjung.com/lecture/2916


동영상 파일을 모바일에서 창 크기에 맞춰서 출력하는 방법입니다.
아래팁 사용할때 주의사항은  유튜브 주소를 꼭 youtub.com 으로 사용하세요
youtu.be 를 사용하면 동영상이 안보일수 있습니다.


1. 소스 코드 복사 기능을 활용하기
샘플보기 : https://www.happyjung.com/demo/css/youtube.html

<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"
    frameborder="0" allowfullscreen></iframe>
</div>


2. css 코드 활용하기
샘플보기 : https://www.happyjung.com/demo/css/youtube2.html
<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 src="https://www.youtube.com/embed/튜브동영상아이디" frameborder="0" allowfullscreen></iframe>
</div>


3. jQuery 활용하기 Ⅰ
샘플보기 : https://www.happyjung.com/demo/css/youtube3.html
유튜브 동영상을 넣을 때마다 코드를 수정하는 것이 번거롭다면 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 src="https://www.youtube.com/embed/튜브동영상아이디" frameborder="0" allowfullscreen></iframe>

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


4. jQuery 활용하기 Ⅱ
<script>
$(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>

위 코드를 <head></head> 에 삽입후 iframe 형태의 유튜브 동영산 주소를 만나면 반응형으로 유튜브 화면이 작동합니다.


관련자료
https://sir.kr/g5_tip/1733
https://www.cmsfactory.net/node/20765
https://sometimes-n.tistory.com/42

댓글목록

profile_image

mm님의 댓글

mm 이름으로 검색 작성일

감사합니다!!


Total 2,634건 20 페이지
  • RSS
기술자료 목록
2254
일반   9922  2018-08-17 15:18 ~ 2018-08-17 15:19  
2253
HTML   17512  2018-08-17 06:39  
2252
HTML   9764  2018-08-15 05:06 ~ 2018-08-15 05:58  
2251
HTML   6678  2018-08-13 18:50  
2250
HTML   24196  2018-08-09 10:12 ~ 2018-08-09 13:26  
2249
JavaScript   21970  2018-08-02 14:39 ~ 2019-11-24 22:20  
2248
HTML   9855  2018-08-01 05:43 ~ 2021-01-05 11:39  
2247
일반   14199  2018-08-01 05:41 ~ 2022-04-12 16:58  
2246
PHP   7845  2018-07-26 20:20  
2245
JavaScript   9211  2018-07-25 14:30 ~ 2018-09-21 08:36  
2244
그누보드   6830  2018-07-25 03:41 ~ 2018-08-26 05:56  
2243
JavaScript   7251  2018-07-23 14:43 ~ 2018-07-23 16:45  
2242
HTML   9334  2018-07-23 02:20 ~ 2018-07-23 14:33  
2241
PHP   10185  2018-07-21 00:10 ~ 2018-07-21 03:56  
2240
그누보드   9939  2018-07-20 20:47 ~ 2018-07-20 21:01  
2239
JSP   8593  2018-07-19 18:57 ~ 2017-10-06 00:00  
2238
JSP   15745  2018-07-19 18:47 ~ 2018-07-26 19:25  
열람
HTML   18170  2018-07-17 18:38 ~ 2020-03-25 18:49  
2236
일반   9699  2018-07-17 17:14 ~ 2018-07-17 17:54  
2235
그누보드   8963  2018-07-17 02:10 ~ 2022-11-15 13:54  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.