【開発日記】day1 :: iframeを使った動画表示

開発日記（主にwebアプリ）を始めました。

明日やる明日やると言って、このブログを更新したのがついに4ヶ月ぶりになってしまいました。

流石にサーバー代が勿体無いので、気軽にかける内容を毎日更新していく感じでやっていこうと思います。

また、最近ハマっているプログラミングの勉強も形として残していこうと思ったので、いっそのこと開発日記を書くことにしました。

プログラマーとしては本当に偏差値20くらいの状態なので、初歩的な内容が続くと思いますが、自分が四苦八苦する姿を見て、コードに抵抗感がある人でも「へー、コード書くのってこんな感じなんだ。自分でもできちゃいそう」と思い、プログラミングを始めるきっかけになれると至上の喜びです。

どのような項目で書いていくかも模索中です。

さて、いつまで継続できるか、拭目以待（目をぬぐって待つ）ですね。（また三日坊主したらリマインドください。）

今、インターンの仕事でつくっているwebアプリの画面で動画を表示させたいので、iframeというhtmlのタグを使う実装を勉強しました。

簡単に言うと、htmlのなかにinlineで小さなhtmlの窓を作って、そこに好きなもの（画像や動画）を表示させるタグです。

具体的なコードを叩くとこんな感じですね。

<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>

上記のコードはこのような形で表示されます。

iframeタグには色々な属性があり、代表的なものをいくつかあげると：

この中では、allowがiframe特有の属性で、例えばiframe内の動画をフル画面表示させたい場合は、その権限を得るためにはallow=”allowfullscreen”としないと行けません。文字通り、Feature Policyになります。他にカメラやマイクの使用許可などがあります。

ちなみに、複数のallowを入れるときはこのように書きます：

<iframe allow="camera 'none'; microphone 'none'">

では、実際に動画を表示させてみます。この場合はyoutubeのリンクを渡してあげるだけでできるので便利です。（動画idの前にembedを入れないといけないことに注意。urlをコピペするだけではうまくいきません）

コード：

<iframe width="420" height="345" src="https://www.youtube.com/embed/N02nn-LUcgo">
</iframe>

表示：

だいたいこんな感じですね。

余談ですが、youtubeの場合はAPIも揃っているのでurlにクエリを載せるだけで自動再生や起動時ミュートなどの設定が簡単にできますが、他のストリーミングサービスはそうでもないので、苦労します（苦労しています）。

自分でiframe作るのめんどくさい。。。という人は、自動生成プログラムあるのでどうぞご活用ください！

https://www.w3schools.com/tags/tag_iframe.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy#the_iframe_allow_attribute

初回はこんな感じでした。かなり初歩的な内容ですが、こんな感じで積み重ねていこうと思います。次回はgitの仕組みをまとめてみようと今のところ考えていますが、また明日決めます。

ご要望ご意見などありましたら、ぜひコメントなどで残してくださると嬉しいです。