YouTubeをcssで可変にするトリック

YouTubeをcssで可変にするトリック

CSS のメディア クエリを使いYouTubeを画面サイズ(PC Tablet smartphone)によって表示サイズを変更するのは難しいです。しかしCSS: Elastic Videosで紹介されているcssで可変にするトリック方法を使うと簡単に画面サイズ(PC Tablet smartphone)によって動画サイズを変更出来ます。

今回はCSS: Elastic Videosで紹介されているYouTubeをcssで可変にするトリック方法を紹介します。設定はとっても簡単です。

YouTubeをcssで可変にするトリック

CSS Elastic Videos

可変にするトリックはCSS: Elastic Videosで紹介されている方法です。

html

iframeコードの箇所がYouTubeのコードになります。iframeコードの箇所を使用するYouTubeコードに変更してください。又iframe以外にobjectコードembedコードでもサイズが変更します。

<div class="video-container">
	<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

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%;
}

これでYouTubeが画面サイズ(PC Tablet smartphone)によって動画サイズが変更されます。

Googleではレスポンシブ ウェブ デザインの推奨しています。つまりCSS のメディア クエリを使って画面サイズ(PC Tablet smartphone)を変更する、という設定です。レスポンシブ ウェブ デザインを構築していく際にYouTubeをcssで可変にするトリックを覚えておくと便利だと思います。

アメブロの記事のサイズに合わせてYouTubeサイズを自動変更

アメブロはスマートフォン対応になっています。スマートフォンだとYouTubeは自動変更されますが、PCではYouTubeサイズは自動変更されません。デザインをカスタマイズした際、記事サイズを大きくしたり、小さくしたりすることもあると思います。

YouTubeはコードを追加した際のサイズによって表示されるため、記事が小さい場合は動画の全てが表示されなかったり、又記事が大きい場合は動画の横に余白スペースが残ってしまいます。

YouTubeサイズより記事が小さい場合
YouTubeサイズより記事が小さい場合

cssで可変にするトリックを使うと小さい記事でもそのサイズに合わせて表示されます。
アメブロcssで可変にするトリック

コードを使っていれば記事サイズを大きくしても、そのサイズに合わせてYouTubeサイズが自動変更されます。
アメブロcssで可変にするトリック

追加するコードは先ほどと同じです。

html

記事に動画を投稿する際にYouTubeのコードを<div class=”video-container”>~</div>で囲みます。

<div class="video-container">
	<iframe width="560" height="315" src="http://www.youtube.com/embed/SHRUT_FpMBs" frameborder="0" allowfullscreen></iframe>
</div>

続いてcssコードを追加します。

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%;
}

デザインが「CSS編集用デザイン」の場合は「こちらから」css編集にコードを追加してください。
それ以外のデザインはフリープラグインにコードを追加して使います。

これでアメブロをカスタマイズした際、記事サイズが変わってもYouTubeサイズも自動変更されるのでとても便利になると思います。

最終更新日: 2013年3月27日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

YouTubeをcssで可変にするトリックの関連記事

コメントを残す

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


*