WEBサイト制作効率化のための、
デザイン・wordpressの試作や覚え書き

動画

Youtubeをサイトに埋め込む

2019-08-14

動画をサイトに取り入れることはいろいろなメリットがあります。文章よりも映像のほうが伝わる情報量が多いため断然分かりやすく、商品の紹介やブランディングにも最適です。Youtubeにアップした動画をカンタンにサイトに埋め込む方法をまとめました!

Youtubeをサイトに埋め込む

  • 1.埋め込みたいYouTubeのページをパソコンで開きます。
  • 2.「共有」をクリックします。
  • 3.「埋め込む」をクリックします。
  • 4.動画の埋め込みの下のコードをコピーします。
  • 5.サイトの埋め込みたい位置にそのコードをペーストします。

埋め込みコードのパラメーターについて

埋め込みコードにパラメーターを追加すると、読み込ませる設定を変えることができます。
パラメーターは埋め込みコード内の動画ID(★★★★★)の後に「?」をつけてパラメーターを追加、2こ目以降は「&」をつけて追加していきます。

埋め込み動画を自動再生させたい

「autoplay=1」を追加します。
再生は視聴回数に入りません。

繰り返し再生させたい

「autoplay=1」「&playlist=★★★★★」を追加します。

関連動画を出したくない

パラメーター「rel=0」を追加することで再生後関連動画が表示されなかったのですが、2018年9月YouTubeに仕様変更があり「rel=0」を追加しても同じチャンネルの関連動画が出てきてしまうようになりました(涙)。
上記のループ再生で関連動画の表示を回避します。

YouTubeの仕様変更は公式ページで告知されていますが、最新の英語ページと日本語ページで更新のずれがあるみたいです。いろいろな分野で新しい情報はほとんど英語!ほんと、英語を勉強しないとです…。

Youtubeの埋め込みをレスポンシブで実装したい

html:埋め込みコードをdivなどで囲み、クラスを付与します。

css

高さをpadding-topで設定しています。
(「56.25%」はYoutubeの画面比率が16:9で、9÷16×100)

-動画

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。普段は埼玉のWeb制作会社に勤務しています。