YouTube埋め込み方法 (レスポンシブ、モダンブラウザ向け)

[ ID : 5959 ]
YouTube埋め込み方法 (レスポンシブ、モダンブラウザ向け)

概要

公式の手順でYouTube動画をWEBサイトに表示させる方法、およびCSSのaspect-ratioプロパティを使用してレスポンシブ対応する方法を紹介。

用途

  • 簡単にYouTube動画をWEBサイトに表示させる。
  • iframeで表示。
  • レスポンシブ対応。CSSの aspect-ratio プロパティを使用。

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

実装方法

  1. 対象動画のページを開く。
  2. 再生画面下の[共有]をクリック。
  3. ポップアップ内右下の[埋め込む]をクリック。
  4. <iframe>を全てコピーする(埋め込みオプションは任意で設定)。
  5. レスポンシブ対応は下記ソースコードを参照。
このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録