この記事は、iframeタグについてまとめたものです。
想定読者：
- iframeタグを知らない人
- iframeタグの使い方が分からない人
iframeタグとは
iframeはhtml内に別のhtmlを埋め込むタグです。
以下、iframeの使い方例を3つ紹介します。
シンプルにiframeタグを使う例
同じ階層にindex.htmlとabout.htmlがある場合の例を紹介します。
以下、index.html内でabout.htmlを埋め込む例です。(bodyタグの中身のみ記述します。)
<p style="color:blue;">indexページです</p>
<iframe src="./about.html">同じ階層にあるabout.htmlを埋め込む</iframe>
pタグはindex.html内に埋め込んでいることを分かりやすくするために記述しただけですので、iframeの使用には全く関係がありません。
以下、index.htmlを実行した結果です。
実行結果1
「indexページです」と書かれた文の下に枠で覆われた部分(aboutページですと書かれてある部分)が埋め込まれている箇所になります。
iframeタグの開始タグと終了タグで挟んだ記述は実行結果には出力されていません。この位置にある文は、htmlの埋め込みに失敗した場合に出力されます。
iframeタグの大きさ等を指定する例
iframeタグはタイトルや高さ、幅などを指定することもできます。
上記の例の下に、下記を追加してみましょう。
<iframe title="about" width="500" height="500" src="./about.html">幅、高さを指定して埋め込む</iframe>
このhtmlの実行結果は以下のようになります。
実行結果2
iframeタグで外部のhtmlを埋め込む例
iframeタグで指定するhtmlは外部のhtmlでも参照可能です。
上記のhtmlに以下を追加してみましょう。
<iframe title="qiita" width="800" height="500" src="https://ja.wikipedia.org/wiki/Qiita">Qiitaとは</iframe>
以下、実行した結果です。Qiitaのウィキペディアページが埋め込まれました。
実行結果3
iframeタグでyoutubeの動画を埋め込む例
iframeタグはYoutube動画の埋め込みも可能です。
埋め込む手順について説明します。
- 埋め込みたい動画のページを開く
- 共有ボタンをクリック(以下の画像の青枠部分のことです)
- 埋め込むボタンをクリック(以下の画像の青枠部分のことです)
4.iframeのソースをコピーする(以下の画像の青枠部分のことです)
- 自分のhtmlに貼り付ける
今回は例としてapple社の動画を自分のhtmlに表示させます。
上記のhtmlに以下のを追加してみましょう。
<iframe width="560" height="315" src="https://www.youtube.com/embed/T-fXzUsPZtM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>youtubeの動画を埋め込む</iframe>
以下、実行結果です。apple社の動画が埋め込まれました。
実行結果4
参考にしたサイト一覧
https://www.youtube.com/user/Apple
iframeの説明のために用いたappleの公式youtubeです。
まとめ
今回はiframeタグの以下のことについて説明しました。
・iframeタグの利用によるhtml内に別のhtmlを埋め込む方法
・iframeタグの利用によるyoutubeの動画を埋め込む方法