menu
menu

キーワード検索

 

最近の投稿

YouTube動画をレスポンシブデザインに対応させる方法

  • Labs

YouTube

こんにちは(・∀・)

先日当サイトでYouTube動画を公開しましたがそのままだとレスポンシブデザインには対応しておりません。

なので今日はWebサイトに貼り付けるYouTube動画をレスポンシブデザインに対応させる方法についてご紹介します。

YouTube動画をWebサイトで公開する

公開したいYouTube動画をブラウザで開いたら「共有」をクリックしてください。

YouTube動画をWebサイトで公開する

「埋め込みコード」をクリックしてください。

YouTube動画をWebサイトで公開する

表示されたコードをコピーして動画を表示させたいHTMLにペーストしてください。

YouTube動画をWebサイトで公開する

そのままだとWebサイトに張り付けたYouTube動画はレスポンシブデザインに対応しておりません。

コード内のwidthとheightを直接変更した場合、width="100%"、height="auto"で横幅は100%で可変になりますが、高さがうまくいきません。

なのでCSSでレスポンシブデザインの設定をします。

YouTube動画をレスポンシブデザインに対応させる

先ほどコピペしたコードに親要素を作ります。ここでは「movies」にします。

HTML

<div class="movies">
<iframe width="560" height="315" src="https://www.youtube.com/embed/VdDO6kME1Bo" frameborder="0" allowfullscreen></iframe>
</div>

CSSで次のように設定します。

CSS

.movies {
	margin: 0 auto;
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.movies iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

親要素「movies」にpositionプロパティの値relativeを設定、「iframe」本体に値absoluteを設定します。

動画の画面比率を出して親要素にpaddingで指定します。paddingはtopでもbottomでもどちらでもいいです。

画面比率の計算式は次の通りです。
4:3の場合
100 / 4 x 3 = 75%
16:9の場合
100 / 16 x 9 = 56.25%

「iframe」の横幅・高さを「100% !important」で指定します。

すると動画画面が縦横可変になります。


いかがでしたでしょうか、やり方がわかれば特に難しいことはありませんでしたね。YouTube動画をレスポンシブデザインに対応させる方法は以上になります。

  • カテゴリー:Labs