콘텐츠로 건너뛰기

반응형 동영상 – 유튜브(YouTube), 다음 tv 팟(iframe, object, embed) 세로 비율 고정

반응형 동영상 – 유튜브(YouTube), 다음 tv 팟(iframe, object, embed) 세로 비율 고정

블로그&인터넷/기타

2014-09-15 18:35:16


블로그나 사이트에 반응 스킨을 적용하더라도 유튜브(YouTube)나 다음 tv 팟 동영상 적용시 자동 크기 조절이 되지 않아 레이아웃이 깨지거나 가로 크기는 조절을 하더라도 세로 크기 조절이 힘들어 미디어 쿼리로 해상도 별도로 일일이 사이즈 설정해 두거나 하던 걸 쉽게 해결해 주는 사이트가 있는데 코드를  미리 스타일 시트를 만들어 두면 동영상 삽입 때 DIV로 감사 주기만 하면 세로 56.25% 비율로 유지 됩니다. 또 다음과 유투브 동영상 뿐만 아니라 iframe, object, embed 소스 코드를 사용하면 적용 가능하고 응용도 가능합니다.

 

http://embedresponsively.com

 

 


INKman's Blog 유투브 반응 001

http://embedresponsively.com/ 코드 지원 사이트에서 유투브 동영상 주소를 넣으면 자동으로 소스 코드를 만들어 줍니다.

 

 

 

 

 


INKman's Blog 유투브 반응 002

유투브 주소창이나 동영상 우 클릭을 통해서 동영상 주소를 복사 해서 입력 폼에다가 복사해서 넣습니다.

 

 

 

 

 

 


INKman's Blog 유투브 반응 003

동영상 주소를 넣고 Embed 버튼을 클릭하면 동영상이 나오고 아래에 소스코드가 나오면 코드를 글 작성중 html 모드에서 생성된 유투브 코드를 삽입하면 적용이 됩니다. 위 코드를 따와서 붉은 밑줄의 유튜브 소스를 빼고 다음 tv 팟 소스를 삽입하면 다음 동영상도 적용 가능 합니다.

 

 

 

 


INKman's Blog 유투브 반응 004

 

 

<style> .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; }  .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>  <div class="embed-container"> <iframe width='640px' height='360px' src='http://videofarm.daum.net/controller/video/viewer/Video.html?vid=v1652NBBGNMBubMiOBO7fu7&play_loc=undefined&alert=true' frameborder='0' scrolling='no' ></iframe> </div> 

 

 

위 코드를 서식으로 만들어 놓고 유투브 또는 다음 tv 팟 동영상 주소나 iframe 소스코드만 바꿔 주면 빠르게 적용 가능합니다.

 

 

 

.embed-container { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; } .embed-container iframe, .embed-container object, .embed-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }
<div class="embed-container">
<iframe width="640" height="360" src="//www.youtube.com/embed/ktEEjk3Xy3s" frameborder="0" allowfullscreen></iframe> </div>

 

스타일 코드는 CSS시트에 등록 시켜 놓고 문서 작성시 동영상 코드를 DIV로 싸주기만 하면 편하게 사용 가능 합니다.

 

동영상이 유튜브나 다음 tv 팟 관계없이 iframe, object, embed 형태의 동영상 코드가 “<div class=”embed-container”></div>” 코드안에 들어 있기만 하면 적용이 되고 동영상 뿐만 아니라 가로 세로 비율을 유지하기 위해 여러 부분에 사용 가능 합니다.

 

#동영상 #유투브 #유튜브 #youtube #iframe #Embed #object #다음TV팟 #반응형

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다