[WordPress.com] YouTube をレスポンシブ対応させるためのCSS

(音声あり)
hdkjjhlgjlikl

動画の内容

  • CSS カスタマイズすることで iPhone 等でもちゃんと YouTube を表示させることができる。
CSS
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

※ 「padding-bottom:56.25%」の数値を変更すると、縦横の比を変えることができます。

HTML
<div class="video-container">
	
</div>

関連情報

備考

  • もともと YouTube のレスポンシブ対応がなされているテーマもあります。(「Responsive」等)
[WordPress.com] YouTube をレスポンシブ対応させるためのCSS | comemo forum

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。