YouTubeの動画を外部サイトに埋め込みたいけどやり方がわからない…！タグはどこ？レスポンシブ設定ってなに？とお悩みではないですか？外部サイトに動画を埋め込んで流入経路を増やせれば、動画の再生時間・回数へ換算されますし、そこをきっかけに関連動画に流れたり、チャンネル登録につながったりするかもしれません。本記事では、YouTube動画埋め込みの活用方法を紹介します。
記事の目次
YouTube動画の埋め込む方法
集客のために、動画サイト以外で自分の動画コンテンツを露出させるためにも、埋め込みコードの存在と埋め込み方法は覚えていたほうがいいです。
動画の埋め込み自体は簡単にできるので、下記手順に沿って進めてみてください。レスポンシブ設定の方法もあわせて解説していきます。
動画埋め込みのタグのコピーの仕方
動画埋め込みの方法は、YouTubeヘルプで丁寧に解説されています。
動画を埋め込む
1. パソコンで、埋め込みたい YouTube 動画に移動します。
2. 動画の下にある [共有] をクリックします。
3. [埋め込む] をクリックします。
4. ボックスに表示されている HTML コードをコピーします。
5. ブログやウェブサイトの HTML にコードを貼り付けます。
動画と再生リストを埋め込む
また、動画だけでなく、再生リストを埋め込むことも可能です！
再生リストを埋め込む
パソコンで YouTube アカウントにログインします。
ページの左側で、埋め込みたい再生リストを選択します。
URL から再生リスト ID をコピーします。
次の手順に沿って個々の動画の埋め込みコードを変更します。
動画 ID の代わりに（「embed/」の後に）、「videoseries?list=」を入力します。
次に「=」の後に再生リスト ID を貼り付けます。
ブログやウェブサイトの HTML にコードを貼り付けます。
動画と再生リストを埋め込む
例:
ホームページなどで、ユーザーが訪問した際に動画を自動再生したい場合には、埋め込みコード内の動画 ID（「embed/」の後に続く文字列）のすぐ後ろに「&autoplay=1」という文字列を追加するだけ。
その他、埋め込んだ動画に字幕をつける方法や、指定位置から再生させる方法などいろいろとカスタマイズもできるので、公式ヘルプを参考にしてみてください。
URL: 動画と再生リストを埋め込む
レスポンシブ設定はHTML＋CSS
動画の大きさをページやデバイスのアスペクト比（縦横比）ごとに最適化することをレスポンシブ設定といいます。この設定が適切でないと、モバイルでの閲覧なのに画像が異様に大きすぎたり、PCのウィンドウを縮小しても画像が大きいままだったり、“見づらいサイト”として認識されてしまいます。
離脱率が激しいコンテンツになってしまわないよう、以下の手順でレスポンシブ設定をしましょう。
・htmlタグの設定
1. 埋め込みコードの前後を〈div class=”video”〉〈/div〉で囲む
2. 埋め込みコードのサイズの数値width=”560″ height=”315″を削除
・cssの設定
iframeとdivのスタイルをそれぞれ指定する
以上になります。
こちらはhtmlとcssの基本的な知識が必要になりますが、埋め込みやレスポンシブ設定を自分で指定せずとも対応しているメディアもあるのでご安心ください。
noteでは簡単に埋め込める
ブログや有料マガジン、SNSとの連携などができるnote（ノート）というプラットフォームでコンテンツを公開していますか？
プラットフォーム特質上から、ノウハウが売られることが多く、note x YouTubeの相性は抜群です。すでにYouTubeで動画配信されている方で、動画解説をnote内に含みたいという方もいらっしゃるのではないでしょうか。
noteの作成画面のCMSはYouTube動画に対応しているので、埋め込みたい動画の「埋め込みコード」をnote内の任意の入力スペースにコピペするだけで埋め込みができます。
タグをコピーしたり、レスポンシブ設定を自分でしなくていいのでとても簡単です。
SNS媒体に動画を埋め込み、どんどん露出の場を増やそう
TwitterやFacebookのSNSには、動画URLを貼り付けるだけで、簡単に埋め込みができる仕様になっています。
こちらは気軽にできて、簡単で良いですよね。
普段からSNS運営に力を入れておくと、各媒体でのフォロワーをYouTubeに流入させることができるのでおすすめです。
簡単にシェアできるSNSから動画の露出の場を増やしていくと良いでしょう。
