YouTube動画の音声だけをWebサイトに埋め込む方法

YouTubeの動画を自分のWebサイトに埋め込むのはとても簡単です。YouTubeはすべての動画に埋め込みコードを用意しているため、コードをコピーしてサイトに貼り付けるだけで完了します。では、「動画の音声部分だけ」を埋め込みたい場合はどうすればよいのでしょうか。実は、少し工夫をすることで、YouTube動画の音声のみをWebサイトに埋め込むことが可能です。この記事では、その具体的な手順をわかりやすく解説します。

YouTube動画の音声をWebサイトに埋め込む手順

1. 埋め込みたい動画を探す

まず、YouTubeにアクセスし、Webサイトに追加したい動画(または音源)を見つけましょう。

2. 動画IDを確認する

動画ページを開いたら、埋め込みたい動画のIDを控えておきます。

たとえば、動画のURLが https://www.youtube.com/watch?v=Obx3e7MfEaI の場合、動画IDは Obx3e7MfEaI となります。URLの「v=」以降にある英数字の文字列が動画IDです。

3. 埋め込みコードの「VIDEO-ID」を書き換える

次のコード内の「VIDEO-ID」の部分を、前の手順で控えた動画IDに置き換えてください。

<div style="position:relative;width:400px;height:105px;overflow:hidden;">
  <iframe src="https://www.youtube.com/embed/VIDEO-ID"
    style="position:absolute;top:-180px;left:0;width:400px;height:300px;"
    frameborder="0" allow="autoplay">
  </iframe>
</div>

このコードの仕組みはシンプルです。iframeで通常どおりYouTube動画を読み込みつつ、CSSで表示位置を上方向にずらすことで動画映像の部分を隠し、結果として音声だけが聞こえる状態を作っています。

width や height の値を調整すれば、プレイヤーのサイズや見え方を自由にカスタマイズできます。音楽やポッドキャスト、ラジオ番組などをBGMとして紹介したい場合に、画面スペースを取らずに済む便利なテクニックなので、ぜひ活用してみてください。