반응형 사이트(블로그)에 유투브 동영상 넣기.

반응형 사이트를 만들때 (유투브)동영상이나 구글 맵을 넣어야할 때가 있다.

근데 이녀석들은 대부분 고정으로 값을 넣기 때문에 반응형할때 난감해질때가 있다.

위 아래 여백이 생긴다던지 동영상 크기가 비율이 안맞게 나오기도한다.

간편하게 바꿔줄 수 있는 사이트를 소개하겠다.

직접 넣는 방법은…아래와 같다. 소스는 맵으로 서울 시청을 예로 들었다.

<style type="text/css">
	.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
	.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 src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.523227926101!2d126.97794510000003!3d37.566295200000006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca2f332cb082b%3A0xe92b70ac420cf0a8!2z7ISc7Jq47Yq567OE7Iuc7LKt!5e0!3m2!1sko!2s!4v1442593690670' width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

주소를 넣으면 자동 소스가 만들어진다.

유투브 동영상, 구글 맵스 등 반응형 소스 만들어주는 사이트
http://embedresponsively.com/