유튜브 동영상 모바일 최적화해서 퍼오기 reponsive iframe youtube, vimeo

홍대주민 산책러입니다. 반가와요 ^^ 

여러분, 블로그 관리자 및 홈페이지 관리자를 하다보면 - 모바일에 최적화해서 유튜브나 비메오 동영상을 넣어야할 때가 있어요. 

근데 유튜브에 소스 공유 버튼 눌러서 가져오면, 반응형 소스대로 출력이 되지가 않습니다. 혹시 그게 궁금해서 여기 들어온거라면 잘 들어오신겁니다. 

1. style 선언해주기 

<style>

.iframeWrapper {

position: relative;

padding-bottom: 56.25%;

padding-top: 25px;

height: 0;

}

.iframeWrapper iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

</style>

2. 소스 넣는 방법

<div class="iframeWrapper">

<iframe src="https://www.youtube.com/embed/-XNU3KNC2h0?ecver=2" frameborder="0" allowfullscreen></iframe>

</div>

이게 전부입니다. 

유튜브에서 소스가져오기부터 반응형으로  소스 올리기

1. 플레이 하는 화면 하단에 공유 버튼 - 소스코드 를 누릅니다. 그리고 뜨는 코드 

<div><iframe></iframe></div> 중에서 <iframe src="~~여기 소스는 모두 다르겠져?~~"></iframe> 이것을 복사함

<style> .iframeWrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .iframeWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> <div class="iframeWrapper"> <iframe src="https://www.youtube.com/embed/-XNU3KNC2h0?ecver=2" frameborder="0" allowfullscreen></iframe> </div>

이렇게 입력합니다.

위 소스를 긁어서 에디터  상단에 "HTML" 을 눌러서 원하는 위치에 넣어주시면 됩니다. 

이렇게 적용한 블로그 포스팅이 있습니다. 

동영상 첨부합니다. 

기왕 이렇게 들어온 거 위 포스팅이 궁금하다면 

지드레곤 '무제(無題) (Untitled, 2014)' 듣기/뮤비/사진