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&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
동영상 파일을 모바일에서 창 크기에 맞춰서 출력하는 방법입니다.
아래팁 사용할때 주의사항은 유튜브 주소를 꼭 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&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
댓글목록