menu
menu

キーワード検索

 

前月(2月)の人気記事トップ10

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 2 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 3 - ) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 6 ↑) 【PHP】PHPでシンプルなメールフォーム
  5. ( 5 - ) 【WiMAX】HUAWEI W04 気づくとWi-Fiの接続が切れてる
  6. ( 7 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  7. ( - ↑) 【jQuery】入門5. jQueryで日時を表示
  8. ( - ↑) 【MySQL】Windows 10にMySQLをインストール
  9. ( 9 - ) 【制作Tips】iPad画面解像度まとめ
  10. ( 3 ↓) 【jQuery】jQueryでドロップダウンメニュー
このエントリーをはてなブックマークに追加

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

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

こんにちは(・∀・)

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

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

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

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

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

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

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

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

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

そのままだと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動画をレスポンシブデザインに対応させる方法は以上になります。

関連リンク

Googleマップをレスポンシブデザインに対応させる方法

  • CSS YouTube
このエントリーをはてなブックマークに追加