YouTube動画の埋め込み方法とレスポンシブ対応にする方法

これから、YouTubeの​​​​​​​動画と再生リストを埋め込みについて、ウェブサイトやブログに YouTube の動画や再生リストを埋め込んで追加できることについて紹介して行きます。

簡単にYouTubeの動画を埋め込みの方法を紹介して行きます。

まず、パソコンで、埋め込みたい YouTube 動画に移動して、動画の下にある [共有]  をクリックし、[埋め込みコード] をクリックします。

そして、ボックスに表示されているYouTubeの HTML コードをコピーして、ブログやウェブサイトの HTML にコードを貼り付けます。

また、YouTube​​​​​​​の再生リストを埋め込みの方法も紹介します。まず、パソコンで YouTube アカウントにログインします。

​​​​​​​ページの左側で、埋め込みたいYouTube​​​​​​​の再生リストを選択します。

次に、URL から再生リスト ID をコピーして、次の手順に沿って個々の動画の埋め込みコードを変更し、動画 ID の代わりに（「embed/」の後に）、「videoseries?list=」を入力します。

さらに、次に「=」の後に再生リスト ID を貼り付けて、ブログやウェブサイトの HTML にコードを貼り付けます。

ここでは、YouTube/ユーチューブの動画を埋め込む方法(iframe)について紹介して行きたいと思います。

まず、埋め込みたいYoutubeの画面を呼び出して、タイトルの下にある「共有」をクリックしてください。

そして、クリック後さらに表示されるボックス内の「埋め込みコード」をクリックしましょう。

そうすると、一番下の枠にYouTubeのHTMLタグが出ましたが、これが、埋め込みたいYouTube​​​​​​​の動画のHTMLコードなのです。

そして、それをコピーしてサイトやブログに直接コピペしてもいいのですが、冒頭で言ったように、せっかくアップしても端末によって尻切れとんぼになってたりします。

また、スーパービックサイズになってたりしたら悲しすぎるということで、自分なりにカスタムしてください。

まずは、すでに埋め込みたいサイズが決まっている場合は自分で指定できます。

また、YouTubeの​​​​​​​HTMLコードの直下にある「もっと見る」をクリックして、上図のような表示がでてくるので、YouTube​​​​​​​の「動画のサイズ」のプルダウンを表示させ、カスタムサイズを選択しましょう。

そして、枠の中に任意の数字を入れるのですが、他の設定してある数字を見ると全てのサイズは、幅：高さ＝16 : 9になっていて、この比率はできるだけ変えないほうがいいです。

また、YouTubeでも推奨されるアスペクト比として「16:9」を推奨しています。

加えて、サイトに埋め込んだあとサイズだけ変えるなら、width（幅）とheight（高さ）の数字だけ変更可能ですし、他のチェックの選択肢は好きなように設定して下さい。

また、Youtubeは2017年8月にデザインを一新したため、方法が若干変わり、ここから下は、最新バージョンのコードのコピーの方法も紹介します。

そして、goodやbadの指マークの横に「共有」の文字が表示されているのでクリックして、画像のようなボックスが表示されるので、「埋め込む」をクリックしてください。

さらに、コードが表示されるので、コピーしてサイトにペーストして、開始位置は秒数を指定することによって、出だしを調整できるのでお好みで設定して下さい。

また、埋め込みオプションもお好みで設定についてです。

そして、以前のバージョンでは動画のサイズを最初からカスタムできましたが、その項目がなくなっているので個人でコード内の”width”と”height”を書き直します。

加えて、コードの取得方法以外は変わらないので、これ以降は上に戻って「幅：高さ=16:9」のところから参照して下さい。

または、YouTubeの​​​​​​​関連動画を非表示して、関連動画を表示（デフォルト）で、このパラメータに関しては、YouTubeの埋め込みコード部分に「動画が終わったら関連動画を表示する」という項目があります。

また、その項目のチェックを外せば?rel=0が追記されたコードが出力され、コントロールの表示・非表示についてです。

そして、デフォルトではYouTube​​​​​​​の画像のように再生・音量・残りの秒数などといった項目が表示されているコントロール部分は、「controls」を使うことで表示・非表示を制御することができます。