유투브 영상 삽입시 가로세로비율을 계산해서 반응형으로 사이즈 조절 완벽해결

유투브 영상 삽입시 가로세로비율을 계산해서 반응형으로 사이즈 조절 완벽해결

 

 

 

 

 

유투브에 있는 영상을 퍼올때 보통 고정사이즈로 삽입을 하게 되는데요.

 

요새 트렌드가 반응형이잖아요.

 

그래서 보통 인터넷에서 검색하면 가로 사이즈를 100%로 넣어서 해결하는 방법을 제시합니다.

 

하지만, 이 방법을 적용하면 모바일에서는 세로가 PC버전으로 고정되어 있어 검은배경이 길게 표시되죠.

 

그래서 찾은 방법은 바로 이 방법입니다.

 

해당 사이트에 들어가셔서 유투브 동영상의 URL를 입력하면 스타일 시트로 계산해서

 

스크립트를 제공합니다.

 

저같은 경우는 아예 CSS 에서 해당 코드를 삽입한 다음 일괄적으로 적용하는 방법으로 사용하고 있답니다 ㅎ

 

유용하게 사용하시길 바랍니다. ㅎ

 

 

P.S 아이프레임(iframe) 이나 임베드(embed) 형식으로 제공하는 컨텐츠(유투브, 비메오, 데일리모션, 구글맵)들 모두 사용 가능합니다.ㅎ

 

2015.3.18.