[HTML]簡単!HTMLでiframeを使う方法
今回は、HTMLで iframe を使う方法を紹介します。
ブログなどでよく Youtube の動画が埋め込まれていたり、
Google Map が埋め込まれているのを見かけますが、
これを可能にするのが iframe の活用です。
構文としては
1 |
<iframe src=”表示するファイル名” width=”横幅″ height=”縦幅″></iframe> |
となります。
例として
Steve Jobs introduces original MacBook Air & Time Capsule – Macworld SF (2008)
の Youtube 画像を埋め込んでみましょう
Youtube の画像を埋め込むには
動画で共有をクリックし、埋め込みコードをクリックすると
iframe のコードが表示されるので、これをコピペして貼り付けます。
今回の場合は、
1 |
<iframe width="420" height="315" src="https://www.youtube.com/embed/1CgAKBf4bbU" frameborder="0" allowfullscreen></iframe> |
となります。
実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。
なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。
Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。
PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。
Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。
今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。
ゼロから作成する場合
1 |
html:5 |
として展開すると
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> |
というようにベースのコードが作成されます。
ubuntu の場合、tab キーで展開します。
今回は、youtube で取得した iframe のコードを body タグ内に貼り付けてみましょう。
そして、ctrl + shit + h でプレビューを見ると、
youtube の動画が埋め込まれているのがわかります。
もし、大きな画面で埋め込みたいという場合には、
width や height の値を変更することで表示する大きさを変更することができます。