menu
menu

キーワード検索

 

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

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 7↑) 【HTML5】HTML5・ページ作成の基本
  5. ( 6↑)【jQuery入門】jQueryで日時を表示
  6. ( 5↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 4↓) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 8-) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. (10-) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

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

関連リンク

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

  • カテゴリー:Labs