HTMLでの埋め込みの方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでの埋め込みの方法について、HTML、動画、音声を埋め込む方法を簡単に解説していきます。

HTMLを埋め込む方法

別のHTML文書を埋め込むには、iframタグを使います。

iframeタグのsrc属性には読み込むHTML文書のURIを指定します。

<iframe src="hoge.html" width="300" height="150"></iframe>

上記のコードでは、hoge.htmlを幅300ピクセル、高さ150ピクセルで表示しています。

動画を埋め込む方法

動画メディアを埋め込むためには、videoタグを使用します。

videoタグのsrc属性には読み込みたい動画メディアのURIを指定します。

<video src="hoge.mp4" width="300px" height="150px"></video>

上記のコードでは、hoge.mp4の動画を幅300ピクセル、高さ150ピクセルで表示しています。

音声を埋め込む方法

音声メディアを埋め込む際には、audioタグを用いることになります。

audioタグにはcontrols属性を指定し、src属性には音声メディアのURIを指定します。

<audio controls src="hoge.mp3"></audio>

上記のコードでは、hoge.mp3の音声メディアを再生ボタン等のインターフェース付きで表示しています。