--- title: "Youtube動画をWEBサイトに埋め込む方法のまとめ" date: 2020-08-25 modified: 2024-12-09 canonical_id: how-to-embed-youtube-movies locale_slug: how-to-embed-youtube-movies author: "esbasicmath" category: - blog - tutorials tags: - embed-youtube-posts summary: "Youtubeでは共有や埋め込みを手軽に行えることから、近年サイトへの埋め込みを目的としてYoutubeへ動画をアップロードするケースが増えています。投稿された動画は簡単に共有・埋め込みを行うことができるだけでなく、デザインや再生方法などのカスタマイズも可能なため企業のマーケティング活動にも幅広く利用されています。" draft: false seo: title: "Youtube動画をWEBサイトに埋め込む方法のまとめ" description: "Youtubeでは共有や埋め込みを手軽に行えることから、近年サイトへの埋め込みを目的としてYoutubeへ動画をアップロードするケースが増えています。投稿された動画は簡単に共有・埋め込みを行うことができるだけでなく、デザインや再生方法などのカスタマイズも可能なため企業のマーケティング活動にも幅広く利用されています。" og_image: "https://embedsocial.jp/hp/wp-content/uploads/2020/08/youtube-banner.jpg" og_image_width: 2240 og_image_height: 1260 structured_data: article --- 世界一の動画共有サイトとして有名なYoutubeですが、共有や埋め込みを手軽に行えることから、近年ではサイトへの埋め込みを目的としてYoutubeへ動画をアップロードするケースが増えています。 特に、投稿された動画は簡単に共有・埋め込みを行うことができるだけでなく、デザインや再生方法などのカスタマイズも可能なため企業のマーケティング活動にも幅広く利用されています。 今回は、Youtube動画を様々な方法でサイトに埋め込んで表示させる方法をご紹介させていただきます。 ## Youtube埋め込みとは YouTube動画の埋め込みとは、ウェブサイトやブログのページにYouTubeの動画を表示させることです。動画が直接ページ上で見られるようになり、訪問者はそのページを離れることなく動画を再生できます。これにより、ウェブサイトの内容を豊かにし、ユーザー体験を向上させることができます。 ![Embed-Youtube-on-web-example](https://embedsocial.jp/hp/wp-content/uploads/2020/08/Embed-Youtube-on-web-example-1024x692.jpg) ## Youtubeをウェブサイトに埋め込み動画を表示する方法 Youtube動画の埋め込みには、大きく分けて以下の3つの方法があります。 **1\. Youtube動画のURLを使う方法** **2\. Youtube動画の埋め込みiframeタグを使う方法** **3\. YoutubeAPIを使う方法（Youtube data API or 埋め込みツール）** 1および2の方法はYoutubeの公式で提供されている機能で、誰でも使える方法ですが、以下のような形のウェブサイトへの実装は**実現することができません。** - 　チャンネルの最新動画を動的に表示する - 　複数のYoutube動画を一覧で表示させる - 　サイトデザインに合わせレイアウトを調整する - 　ハッシュタグをもとに不特定多数の動画を収集する - 　TikTokやInstagramリールの動画と一緒に埋め込む 自分のウェブサイトに合わせてより**高度なカスタマイズしたい場合は３のAPIを使った方法**がおすすめです。 以下にそれぞれの特徴と方法について詳しく見て、皆さんに会った方法を見つけてください。 ### 1\. Youtube動画のURLを使う方法 CMS（例: WordPress）やブログサービスがYouTubeのURLを自動的に認識してプレーヤーに変換する機能を提供している場合に使える方法です。 記事やページに直接YouTubeの動画URLを貼り付けます。動画の「共有」ボタンをクリックするとリンクURLが表示されますので「コピー」します。 WordpressやWixなど人気のウェブサイトビルダーでは、URLを入力するためのブロックが用意されていて、コピー&ペーストで動画が表示されます。 ![youtube動画のURL](https://embedsocial.jp/hp/wp-content/uploads/2020/08/youtube動画URL-1024x494.webp) この方法はコーディング知識が不要で無料でできる、最も簡単な埋め込み方法です。 ただし、自動で生成されるプレーヤーのサイズはウェブサイトのデザインやレイアウトに依存する場合が多く、カスタマイズ性が低い場合が多く、また開始時間の指定などもできません。 詳しい方法を知りたい場合は、この記事の後半のセクションで確認してください。 ### 2\. Youtube動画のiframeタグを使う方法 動画のサイズや再生開始時間などをカスタマイズをしてウェブサイトに表示したい場合は、Youtubeから埋め込みタグを取得する方法があります。 動画のサイズや開始時間の指定など、カスタマイズが可能ですが、HTMLの編集が可能な環境が必要です。 動画のiframeタグの取得方法は以下の通りです。 **1\. サイトへの埋め込みたい動画を開き、メニューバーから「共有」ボタンを選択します。** ![](https://embedsocial.jp/hp/wp-content/uploads/2020/08/share-youtube-movie-1024x586.jpg) **2\. 表示された選択肢の中から「埋め込む」をクリックします。** ![](https://embedsocial.jp/hp/wp-content/uploads/2020/08/embed-yotuube-movie-1024x587.jpg) **3\. 動画のプレビューとともに表示される埋め込み用コードを「コピー」を押して取得します。** ![](https://embedsocial.jp/hp/wp-content/uploads/2020/08/get-youtube-embed-code-1024x582.jpg) **4\. 取得したコードを、サイト上で動画を表示させたい位置に埋め込めば完了です。（ タグ内に埋め込む必要があります）** #### Youtube動画の再生や表示のカスタマイズ方法 Youtubeから動画を埋め込む際には、パラメータを追加することで再生や表示をさらにカスタマイズした状態で表示させることが可能です。ここでは、代表的な例をいくつかご紹介いたします。 - - 　**動画の再生開始時間を指定する** 動画の再生開始時間を指定することで、長い動画の一部分にフォーカスして表示させることができます。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/08/choose-start-time-scaled.jpg) - - 　**コントロールバーの表示をなくす** 動画のスキップなどを行うためのコントロールバーを非表示にすることができます。サイト訪問者に対し最後まで必ず見せる必要がある動画を表示させる場合などに有効です。 動画のスキップなどを行うためのコントロールバーを非表示にすることができます。サイト訪問者に対し最後まで必ず見せる必要がある動画を表示させる場合などに有効です。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/08/remove-control-bar-1-scaled.jpg) - - 　**動画の表示サイズを変更する** 取得したコードの **width（横幅）とheight（高さ）**の値を変更することで、表示させる動画の大きさを変更することができます。下記の例では、widthを320ピクセル、heightを180ピクセルに設定することで小さめに表示させています。 - - 　**動画の再生終了位置を指定する** Youtubeサイト内の設定で終了位置の指定はありませんが、パラメータを追加することで開始時間だけでなく終了時間も制御することができます。動画URLの末尾に **end?=(秒数)** を追加すれば設定が可能です。下記の例では、30秒時点を動画の再生終了時間に設定しています。 - - 　**動画の再生バーの色を変更する** 動画が再生されている秒数を示す再生バーの色を「赤（red）」または「**白（white）** 」に設定することができます。動画の色合いがデフォルトの赤色と合わない場合には、この設定を変更することで調整可能です。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/08/white-control-bar.jpg) - - 　**再生リストとして動画を埋め込む** またYoutubeの動画は個々に埋め込むだけでなく、再生リストを単位として埋め込むことも可能です。最初の動画の再生が終了したのちには再生リスト内の次の動画を続けて再生でき、複数の動画をまとめて見せたいときに有効です。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/08/embed-youtube-playlist-1-scaled.jpg) ![](https://embedsocial.jp/hp/wp-content/uploads/2020/08/embed-youtube-playlist-2-scaled.jpg) ![](https://embedsocial.jp/hp/wp-content/uploads/2020/08/embed-youtube-playlist-3-scaled.jpg) - - 　**レスポンシブに動画を埋め込み・表示させる方法** Youtubeの動画埋め込みはiframe（アイフレーム）のコードを使用しているため、そのままの設定ではスマホ・PC・タブレット全ての画面で同じ大きさでしか表示させることができません。以下のようなコードを埋め込むことで動画を**レスポンシブ（PC・スマホ両方に適する形）**に表示させることができます。 埋め込み時のカスタマイズを設定できるパラメータ一覧を確認については、[Youtube公式サイト（外部リンク）](https://developers.google.com/youtube/player_parameters?hl=ja)より確認することができます。 ### 3\. Youtube APIを使う方法（Youtube data APIまたは埋め込みツール） YouTube APIはYouTubeの機能やデータを、ウェブサイトや他社開発のアプリケーションで使えるようにするためのツールです。 例えば、YouTubeの動画を検索したり、特定の動画の情報を取得したり、自分のウェブサイトに動画を埋め込んだりする際に使用します。 APIを使うと動画をWEBサイトに埋め込む際に、高度なカスタマイズが可能になります。例えば[YouTube Data API](https://developers.google.com/youtube/v3?hl=ja)を使用して動画情報を取得し、カスタムプレーヤーをウェブサイトに組み込みことができます。 しかしAPIの利用には開発の知識が必要です。そこでおすすめしたいのがYoutube API対応のサードパーティアプリ≒埋め込みツールの活用です。 [![YouTube埋め込み無料トライアルバナー](https://embedsocial.jp/hp/wp-content/uploads/2020/08/Youtube-free-trial-CTA-1024x512.webp)](https://embedsocial.jp/admin/continue_plugin_purchase/socialfeed29/trial?continue_onboarding=ai_widget) #### Youtubeの埋め込みツールやプラグインを使う方法 Youtubeの埋め込みツールとは、Youtube API対応のサードパーティアプリとも呼ばれます。これらはYoutubeAPIを統合している第三者の会社が開発したアプリケーションのことです。 埋め込みツールを使えば、コーディングスキル不要で、Youtube動画を簡単に動画を埋め込みWebサイトに表示できます。[EmbedSocial](https://embedsocial.jp/product/embedfeed/)の[テンプレート](https://embedsocial.jp/p/templates/feed/category/youtube)を見ていたけばわかるように、高度なカスタマイズも可能です。 このようなツールでは一般的に、ツール上で自動的に動画を取得し、WEBサイトに埋め込むためのデザインや各種カスタマイズを行います。 埋め込みはhtmlコードを使います。ユーザーはコードをコピーして、WordPressなどでつくったウェブサイトのHTMLに貼り付ければ、Youtube動画をウェブサイトに表示することができます。 * * * 以上3つの方法をご紹介しました。これらの方法を適切に選択し、使い分けることで、ウェブサイトやブログに動画を効果的に埋め込むことができます。ニーズに応じて最も適した方法を選んでください。 ここからは各種ウェブサイトビルダーで動画を埋め込み表示させる方法をご紹介します。 ## WordPressサイトにYoutubeの動画を埋め込む方法 WordpressではURLを使う方法ととiframeを使う方法、2つの方法で動画を埋め込むことができます。 #### URLを直接記入する方法 Wordpressでは、エディタにURLを記入するだけで動画を表示させることができます。 **1\. ブラウザでYoutube動画を開き、「共有」から「コピー」を選択することで動画URLを取得することができます。** ![youtube動画のURL](https://embedsocial.jp/hp/wp-content/uploads/2020/08/youtube動画URL-1024x494.webp) **2\. 取得した動画URLをそのままWordpressのエディターにコピーすれば表示させることができます。** ただしこの場合には表示させる動画の大きさを変更することができないため、サイト幅に合わせた表示を希望される場合には事項以降の方法で動画を埋め込むことが有効です。 ![](https://embedsocial.jp/hp/wp-content/uploads/2020/08/paste-video-link.png) #### ショートコードを使って記入する方法 下記のようにショートコードを利用して埋め込みを行うことも可能です。URLをコピー＆ペーストする場合には動画の幅を指定することができないため、一定の幅で動画を表示させたい場合にはこの方法が有効です。embedで囲われた部分のURLを変更することで、埋め込む動画を指定することができます。 使用中のWordpressテーマによっては、ショートコードの利用・動画サイズの変更ができない場合があります ![