YouTube動画埋め込みをレスポンシブ対応させる方法！埋め込みコードの取得は？

この記事ではYouTube動画の埋め込みテクニックをご紹介していきます。ご自身のブログやWebサイトでYouTube動画を埋め込む際、非常に有効なテクニックです。このテクニックを使って、ブログやWebサイトのクオリティーをあげて、クリック数をさらに伸ばしていくことも可能です。

それでは初心者の方に【YouTube動画の埋め込み】とは一体どういうものか紹介させて頂きます。下記の画像を見てみましょう。こちらはYouTubeの埋め込みのサンプルを表示している、Webサイトになります。

このようにWebサイトなどに、YouTubeの動画をそのまま埋め込むことが可能です。ですが、このYouTubeの埋め込みには、【html】【iframe】【CSS】【タグ】【埋め込みコード】【パラメータ】など様々なテクニックが必要になります。なにやら難しい単語が出てきましたが、簡単に覚える事ができますので、初心者の方も安心して下さいで。
 

YouTuberを目指している方は【YouTube動画の埋め込み】を知っておくと、自身のブログでも告知ができます。また自分のブログを持っていて動画でメッセージを発信したい人にとっては、とても便利なツールです。それではまずYouTubeの埋め込みコード（htmlタグ)とは一体どういったものなのでしょうか？早速見ていきましょう。
 

それでは【YouTube動画の埋め込みコード（htmlタグ)】について説明していきましょう。【YouTube動画の埋め込みコード（htmlタグ)】とは、YouTubeの動画が持っているオリジナルのURLのようなコード（htmlタグ)の事になります。

それぞれのYouTube動画が違ったコード（htmlタグ)を持っています。まずはこの【YouTube動画の埋め込みコード（htmlタグ)】が動画の埋め込みには必要になってきますので、【動画の埋め込みコード（htmlタグ)の取得方法】を紹介していきます。

動画の埋め込みコード（htmlタグ)の取得方法ですが、取得自体は非常に簡単です。まずはYouTubeの動画ページを開きましょう。YouTubeの動画ページが開いたら、スクリーン下部、動画タイトルの右側に【共有】タブがあるので、クリックしましょう。

【共有】タブをクリックすると、下記の画像のようなポップアップがでてきます。”リンクの共有”のリストの中にある【埋め込む】をクリックしていください。

【埋め込む】をクリックすると、下記のポップアップが出てきます。このポップアップの右側部分にあるのが、YouTube動画の埋め込みコード（htmlタグ)になります。右下の【コピー】をクリックすると、埋め込みコード（htmlタグ)がコピー出来ます。

普段YouTubeを見るだけのユーザーは【YouTubeの動画の埋め込みコード（htmlタグ)】自体、見た事がない方が多いかもしれません。しかし、このように簡単に埋め込みコード（htmlタグ)は取得が可能なのです。それでは早速、ここでコピーした埋め込みコード（htmlタグ)を使って、ブログやサイトに動画の埋め込みをしていきましょう。

それではYouTube動画をブログやサイトに埋め込む方法をご紹介していきます。

先ほど紹介したYouTube動画埋め込みコード（htmlタグ)のコピーの方法のおさらいです。まずは動画ページから【共有】タブクリック＞埋め込みコード（htmlタグ)のページへジャンプします。右下部分に【コピー】タブがあるのでクリックします。すると画面右下に【リンクをクリップボードにコピーしました】と表示されます。これでコピーが完了です。

また埋め込みコード（htmlタグ)自体を【ctrl+C】を使ってコピーする事も可能です。使い慣れている方法でコピしていきましょう。あとはご自身でお使いのWEBページへ埋め込みコード（htmlタグ)をコピーすれば、YouTube動画の埋め込みが完了です。

続いて動画サイズの調整方法です。それぞれのWebサイト上のサイズが異なるので、動画サイズの縦幅、横幅を調整して、ご自身のWebサイトのサイズに合わせて動画を埋め込むと綺麗に表示されます。必須ではありませんが、Webの見た目が格段に上がります。それでは早速サイズの調整方法を確認していきましょう。