YouTubeやGoogleマップの埋め込み画像を端末サイズにフィットさせる

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>地図や動画をサイトに埋め込む</title>
</head>
<body>

<div id="wrapper">
	<h1>地図や動画をサイトに埋め込む</h1>

	<h2>GoogleMap</h2>
	<div class="responsive-frame">
		<!-- Google Mapのサイトから取得したコード -->
		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d92941.07258532103!2d129.78391646011238!3d32.74938683875587!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3515533865a8901b%3A0x46fc857a983dd19f!2z56iy5L2Q5bGx!5e0!3m2!1sja!2sjp!4v1494211552870" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
	</div>

	<h2>YouTube</h2>
	<div class="responsive-frame">
		<!-- YouTubeのサイトから取得したコード -->
		<iframe width="560" height="315" src="https://www.youtube.com/embed/MdaX-Ex0JCw" frameborder="0" allowfullscreen></iframe>
	</div>
</div>

</body>
</html>

style.css

/* style.css */

*{
	margin: 0;
	padding: 0;
}
body{
	font-size: 16px;
	font-family: 'メイリオ';
	margin: 20px;
}
h1{
	border-bottom: solid 1px #3a3;
	color: #3a3;
}
h2{
	font-size: 1.1em;
	margin-top: 1em;
	margin-bottom: 5px;
	padding-left: 5px;
	border-left: solid 1em #3a3;
}
p{
	padding-top: 1em;
	padding-left: 1em;
}

/*
	全体を中央揃えに
*/
#wrapper{
	width: 800px;
	margin: 0 auto;
}

@media screen and (max-width: 960px){
	h1, h2{
		font-size: 95%;
	}
	#wrapper{
		width: 500px;
		margin: 0 auto;
	}
}

@media screen and (max-width: 640px){
	h1, h2{
		font-size: 90%;
	}
	#wrapper{
		width: 90%;
		margin: 0 auto;
	}
}
/*
	埋め込みiframeタグをレスポンシブに対応させる
		参考サイト：https://inthecom.net/718
*/
.responsive-frame{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.responsive-frame iframe,
.responsive-frame object,
.responsive-frame embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

コメント