無料でビットコインをもらえるのは、ビットフライヤー

[み]埋め込み動画もレスポンシブに!ブラウザのサイズに合わせて動画のサイズもリサイズする方法

YouTubeとかVimeoとかの動画をレスポンシブなWebサイトに埋め込んだ場合、せっかくなのでこの埋め込み動画もレスポンシブにリサイズしてほしいですよね。それを実装する方法を紹介します。

ブラウザのサイズに合わせて埋め込み動画もリサイズする方法

YouTubeやVimeoのような埋め込み動画のレスポンシブ対応は、HTMLとCSSを次のように書いてやると実装できます。HTMLは動画を表示させるiframeをdiv要素で囲み、CSSはdivとiframeそれぞれにスタイルを指定します。

html

HTML
<div class="video">
	<iframe width="960" height="540" src="https://www.youtube.com/embed/wPYCDn8EvUE" frameborder="0" allowfullscreen></iframe>
</div>

CSS

CSS
.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	text-align: center;
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です