HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLページにYouTube動画を埋め込む方法【初心者向け解説】

YouTubeの動画は、Webページにとても簡単に追加できます。必要なのは、動画を「埋め込む（エンベッド）」ことだけです。この記事では、動画IDの取得方法から、実際にHTMLへ動画を埋め込む手順まで、サンプルコード付きでわかりやすく解説します。

1. 動画IDを取得する

まず、埋め込みたい動画の動画IDを取得しましょう。

ステップ1： 対象の動画を開き、動画上で右クリックします。表示されたメニューから「Stats for nerds（統計情報）」を選択してください。

HTMLページにYouTube動画を埋め込む方法【初心者向け解説】

選択すると、以下のようなダイアログボックスが表示され、動画の詳細な統計情報を確認できます。

HTMLページにYouTube動画を埋め込む方法【初心者向け解説】

上の画像では、動画IDが「F6m0ghjadlw」であることが確認できます。なお、ブラウザのアドレスバーに表示されるURL（例：https://www.youtube.com/watch?v=F6m0ghjadlw）の「v=」以降の文字列も、同じ動画IDを表しています。

それでは、この動画IDを使って、Webページに動画を埋め込んでみましょう。

2. iframeタグで動画を埋め込む（推奨方法）

最も一般的で推奨されるのは、<iframe>タグを使用する方法です。src属性に「https://www.youtube.com/embed/動画ID」という形式のURLを指定します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
    <title>Learn WordPress</title>
</head>
<body>
    <h1>WordPress Installation</h1>
    <p>XAMPPサーバーを使ってローカル環境にWordPressをインストールする手順を示した動画です：</p>
    <iframe height="350" width="600"
        src="https://www.youtube.com/embed/F6m0ghjadlw">
    </iframe>
</body>
</html>

実行結果

以下のように、YouTube動画がWebページに正常に埋め込まれて表示されます。

HTMLページにYouTube動画を埋め込む方法【初心者向け解説】

3. embedタグで動画を埋め込む

<embed>タグを使っても、同様に動画を埋め込むことができます。以下はそのHTMLコードです。

サンプルコード

<!DOCTYPE html>
<html>
<head>
    <title>Learn WordPress</title>
</head>
<body>
    <h1>WordPress Installation</h1>
    <p>XAMPPサーバーを使ってローカル環境にWordPressをインストールする手順を示した動画です（embed要素を使用）：</p>
    <embed height="350" width="600" src="https://www.youtube.com/embed/F6m0ghjadlw">
</body>
</html>

実行結果

こちらも、動画が問題なく埋め込まれて表示されます。

HTMLページにYouTube動画を埋め込む方法【初心者向け解説】

まとめ

YouTube動画をWebページに埋め込むには、動画IDさえ分かれば非常に簡単です。<iframe>タグと<embed>タグのどちらでも実装できますが、現在のHTML標準では互換性や柔軟性の高いiframeタグの使用が推奨されています。width属性とheight属性を調整すれば、サイトのデザインに合わせたサイズで動画を表示できるので、ぜひ試してみてください。

  1. iPhoneにYouTube動画をダウンロードしてカメラロールに保存する方法【脱獄不要】

    美しいデザインと優れたパフォーマンスを誇るiPhoneですが、時にはその制限がユーザーをイライラさせることもあります。例えば、iPhoneでYouTube動画を見ていて、それをカメラロールに保存したいと思っても、標準機能では実現できません。もどかしく感じたことはありませんか?実際のところ、YouTube Premium(旧YouTube Red)の有料サブスクリプションを受け入れない限り、iPhoneにYouTube動画を保存するのは一筋縄ではいきません。有料プランでは広告なしで動画を視聴でき、オフライン再生用のダウンロード機能も利用できます。しかし、ダウンロードした動画にアクセスできるのはY

  2. YouTube以外にも使える！おすすめ動画共有サイトベスト10

    お気に入りの映画のワンシーンを観たいときも、気分転換にスタンドアップコメディを楽しみたいときも、動画共有サイトは最高の情報源になります。デバイスのトラブル解決法から創作活動のヒントまで、動画は新しいことを学ぶための絶好の手段です。さらに、これらのサイトではアカウントを作成して動画をアップロードしたり、コメントを残したり、お気に入りの動画を友人や家族とシェアしたりすることもできます。 動画共有サイトは数多く存在しますが、質の高いコンテンツをそろえ、多くのユーザーに届いているサービスは実はそれほど多くありません。この記事では、ぜひチェックしておきたい動画投稿サイトを10個厳選して紹介します。 Yo