HTMLに動画を埋め込む方法

この WikiHow では、HTML にコードを貼り付けて YouTube の動画をウェブサイトに埋め込む方法と、HTML5 の <video> 要素を使って .mp4, .ogg, .webm の動画を手動で埋め込む方法を説明します。

方法 1

YouTube 動画を埋め込む

1. YouTube.comで埋め込みたい動画を探します。YouTubeで動画のタイトルをクリックし、動画を開きます。

   • この方法は、他の多くの動画共有サイトにも使えます。リンクの名前はそれぞれ異なりますが、通常、埋め込みたい動画の近くに「Embed（埋め込む）」または「Add to Website（ウェブサイトに追加）」のリンクを見つけることができます。
2. SHAREをクリックします。動画のすぐ下にあります（右向きの矢印のオプション）。共有オプションのリストが表示されます。
3. 埋め込み]をクリックします。最初のアイコンです。右上にHTMLコードを含むウィンドウが開きます。
4. 動画の埋め込みオプションを選択します。

   • 特定の時間からビデオを開始したい場合は、「Start at」を選択し、開始したい時間を入力します（例：1分44秒のところからビデオを再生するには「1:44」）。
   • プレーヤーコントロールを表示する」にチェックを入れると、視聴者が動画の音量調整、停止、開始、一時停止ができるようになります。
   • YouTubeにこの動画を視聴している人の情報を収集させたくない場合は、"プライバシー拡張モードを有効にする "にチェックを入れます。
5. COPYをクリックします。埋め込みコードがクリップボードにコピーされます。
6. 編集したいHTMLファイルを開きます。ウェブサイトの編集にオンラインツールを使用している場合は、そのツールの、動画を表示するページのHTMLファイルを直接編集できる部分に移動します。手作業でサイトを編集する場合は、お好みのテキストエディタでそのページのソースコードを開きます。
7. 動画を挿入したい場所をクリックします。HTMLコードのどこにでも動画を挿入できます。これにより、カーソルが希望の位置に配置されます。
8. Command+V (Mac) または Ctrl+V (PC) を押して、コードを貼り付けます。YouTubeからコピーしたコードがHTMLファイルに表示されます。
9. ファイルを保存し、ウェブサイトに公開します。動画をテストするには、動画を埋め込んだページを任意のウェブブラウザで開き、動画をクリックして再生を開始します。

方法2

HTML5 動画要素を使用する

1. 動画をウェブサーバーにアップロードします。この方法は、YouTubeのような共有サイトではなく、自分のウェブサイトに直接動画をアップロードしたい場合に最適です。また、動画を埋め込むのに "iframe "を使いたくない場合にもこの方法が使えます。

   • すべてのウェブブラウザで正しく表示できるように、動画を MP4 ファイルとしてアップロードします。video 要素は WebM や Ogg ビデオファイルもサポートしていますが、Safari では再生できません。
   • ほとんどのブラウザは、HTMLの<embed>タグを使用する外部プラグインのサポートを削除しているため、<video>タグを使用することで、大半のユーザーが動画を表示できるようになります。
2. 編集したいHTMLファイルを開きます。オンラインツールを使ってウェブサイトを編集している場合は、そのツールの、動画を表示するページのHTMLファイルを直接編集できる部分にアクセスしてください。手作業でサイトを編集する場合は、お好みのテキストエディタでそのページのソースコードを開きます。
3. 動画を挿入するコードを入力します。必要に応じてファイル名とサイズを変更しながら、動画を表示したい場所にこのコードを入力します： <video src="wikihow.mp4" width="320" height="240" controls></video>

   • wikihow.mp4をあなたのビデオファイルの名前に置き換えてください。動画ファイルがウェブ上の他の場所にある場合は、ファイルへの完全な URL パス（例："https://www.wikihow.com/test.mp4"）に置き換えてください。
   • 幅」と「高さ」の数値は、動画のサイズに合わせて置き換えることができます。
   • コントロール オプションを使用すると、動画を視聴している人が必要に応じて動画を一時停止、再生、音量調整、停止できるようになります。
4. ファイルを保存し、ウェブサイトに公開します。動画をテストするには、動画を埋め込んだページを任意のウェブブラウザで開き、動画をクリックして再生を開始します。

この記事は、CC BY-NC-SAの下で公開されている " How to Embeded Video in HTML " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。