YouTube動画の埋め込む方法
動画の埋め込み自体は簡単にできます。
下記手順に沿って進めてみてください。
レスポンシブ設定の方法は最後に解説していきます。
動画埋め込みのタグのコピーの仕方
動画埋め込みの方法は、YouTubeヘルプで丁寧に解説されています。
1. パソコンで、埋め込みたい YouTube 動画に移動します。
2. 動画の下にある [共有] をクリックします。
3. [埋め込む] をクリックします。
4. ボックスに表示されている HTML コードをコピーします。
5. ブログやウェブサイトの HTML にコードを貼り付けます。
参考URL:https://support.google.com/youtube/answer/171780?hl=ja
また、動画だけでなく、再生リストを埋め込むことも出来ます。
パソコンで YouTube アカウントにログインします。
ページの左側で、埋め込みたい再生リストを選択します。
URL から再生リスト ID をコピーします。
次の手順に沿って個々の動画の埋め込みコードを変更します。
動画 ID の代わりに（「embed/」の後に）、「videoseries?list=」を入力します。
次に「=」の後に再生リスト ID を貼り付けます。
ブログやウェブサイトの HTML にコードを貼り付けます。
参考URL:https://support.google.com/youtube/answer/171780?hl=ja
【埋め込みタグ例】
<iframe width="560" height="315" src="https://www.youtube.com/embed/o6wtDPVkKqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
【埋め込み例】
ホームページなどで、ユーザーが訪問した際に動画を自動再生したい場合には、埋め込みコード内の動画 ID（「embed/」の後に続く文字列）のすぐ後ろに「&autoplay=1」という文字列を追加するだけです。
指定位置から再生させる方法などいろいろとカスタマイズもできるので、公式ヘルプを参考にしてみてください。
レスポンシブの設定方法
動画の大きさをページやデバイスのアスペクト比（縦横比）ごとに最適化することをレスポンシブ設定といいます。この設定が適切でないと、モバイルでの閲覧なのに画像が異様に大きすぎたり、PCのウィンドウを縮小しても画像が大きいままだったり、“見づらいサイト”として認識されてしまいます。
以下の手順でレスポンシブ設定をしましょう。
【htmlタグの設定】
・以下の通り、埋め込みコードの前後をdivで囲み、サイズ指定の数値を削除する。
<div class="”video”"> <iframe src="https://www.youtube.com/embed/o6wtDPVkKqI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
【cssの設定】
・iframeとdivのスタイルをそれぞれ指定する
こちらはhtmlとcssの基本的な知識が必要ですが、埋め込みやレスポンシブ設定を自分で指定せずとも対応しているメディアもあるのでご安心ください。
さいごに
TwitterやFacebookのSNSには、動画URLを貼り付けるだけで、簡単に埋め込みができる仕様になっています。
普段からSNS運営に力を入れておくと、各媒体でのフォロワーをYouTubeに流入させることができるのでおすすめです。
簡単にシェアできるSNSから動画の露出の場を増やしていくと良いでしょう。
English
Japanese