Webサイトで動画を扱う方法
Creative Member WEBチーム
こんにちは。
WebチームのSです。
ITパスポートの受験には「顔写真付きの本人確認書類」が必要ですが、国家資格のためこの本人確認書類の基準はかなり厳しく、ITパスポートを受験するまでにかなりの時間を要してしまいました。公式サイトの「記載の書類の他にも使用できる書類はある」「詳しくはお問い合わせください」の記載を見て、本人確認に使えそうな手持ちの公的書類を全てかき集め問い合わせたところ、無理でした。皆さんも気を付けてください...
マイナンバーカードの発行に要する期間を調べると、およそ「1ヶ月で取得できる」と出てきますが、私は３ヶ月を要することとなってしまいました。
申請から「マイナンバーカードを受け取りに来ていいですよ！」という書類が届くまでに約半月、そこから更に窓口に直接受け取りに行くための枠を予約をする必要があります。窓口は基本平日にしか空いておらず、数少ない休日の営業時間は当然枠が埋まっているため、予約できる枠が最短で２ヶ月先となってしまいました。運転免許証やパスポートを持っておらず、顔写真付きの本人確認書類を必要としている方は十分に気を付けてください！
本題に入ります。
Webサイトで動画を扱う方法
方法：コーディング
- 直接埋め込み：videoタグ
- Youtube①：iframeタグ
- Youtube②：IFrame Player APIを使用
選び方（確認事項）
選ぶ基準ですが、そもそも何が使えそうなのかによって選択肢が減る可能性があるため、下記は早期段階に確認しておくべき事項でもあります。「Youtubeから埋め込み2：IFrame Player APIを使用」する場合は他の選択肢に比べると条件によっては実装に苦戦する場合もあるため、注意が必要です。
- UI - デザイン
- 再生ボタンや各コントロールボタンのデザインにもこだわりたい場合、YoutubeのUIを避けるならvideoタグ+jsが適しているかもしれません。
- UX - 再生設定
- 自動再生、ループ、全画面表示、サムネイルやコントロールなど、動画の細かい動作は方法によっては実装できない場合もあります。
Youtube動画を埋め込む場合は公式が提供している一見便利な機能を使うことになりますが、未解決のエラーが残されたままの機能も割とあるため、外せない要件がある場合は注意して事前に起こり得るエラーを調べておくと良いでしょう。 - 導線
- Youtubeから埋め込む方法だと、Youtubeへ離脱してしまう可能性があります。
自身のチャンネルに誘導したい場合は効果的ですし、Youtubeへの離脱は避けたいという場合は直接埋め込むか、IFrame Player APIを使用してYoutubeのUIを控えめにするといった選択肢もあります。 - そもそも実装できるのか
- どのような方法が良いのか調べる前に、そもそもどの方法が実装できて何なら実装できないのかを早期段階で確認することが大切です。
CMSをお使いの場合はそれぞれで推奨・または使えないとされている方法がある可能性が高く、videoタグで直接埋め込む方法でしたら容量が大きくpushできない・サーバーにUPできないといった壁が存在する可能性があります。
css gridの悪い例
ここからは急ですが、過去2回の記事でcss gridについてご紹介させていただきましたが、今回は逆にgridが適していない場面をお伝えしようと思います。
複数人が携わるプロジェクトにおいてのコーディングの経験が浅く、決め打ちのような書き方をしてしまうことが多く、度々ご指摘をいただいております。
下記は中でも最近これは良くないな、と気づき修正した例です。
- gap目的
- gridレイアウトを用いなくてもいいような普通のblock要素の親要素をgridに指定し、個々のmarginを設定する代わりにgapを用いる方法です。
- ←こういった記号の配置目的
- listアイテムをそれぞれgridにしてlist頭の装飾を左に配置する方法ですが、listアイテムの内容に要素が増えるとすぐに崩れてしまいます。
読んでいただきありがとうございました！