videoタグの埋め込み・レスポンシブル・サムネイル簡単設定！
videoタグで基本中の基本といったら「埋め込み・レスポンシブル・サムネイル設定」ではないでしょうか？一番簡単な方法は動画サイト等にアップして、そこからリンクを貼ることでしょうけど・・。私はYou Tubeチャンネルを持っていないので＾＾；
今回はhtmlの勉強も兼ねて、純粋に「html/css」のみで、自分のポートフォリオサイトに動画を埋め込んでみました。初心者目線で書いていきますので、高度な技術・時短のコピペを求める方はスルーしてくださいね＾＾
■目次■好きなところからどうぞ！！
１つめに「videoタグの埋め込み」方法。
「埋め込み」は鉄板というか、王道の２つを解説します。
１−１．videoタグの「自動再生、ループ、ミュート（無音）」にする。
これは、訪問者がトップページに入ったときに、「動きのある背景」があると「おっ！」って感じでインパクトがありますよね。まあ、トレンドでもありますが。でも、勝手に音が出るのも迷惑ですよね。なので、この３記述はセットみたいなものです。
簡単に言うと「<img>タグ」を記述するイメージです。
ファイル名ダサいのですいません。大事なのは後半の記述の「autoplay muted loop」の３点セットです。すると、下の動画のように、動きのあるファーストビューになります。
＊これは私のポートフォリをサイトの一部です。
１−２．videoタグの「再生・一時停止・再生位置の移動・ボリューム」をコントロールする。
これは、訪問者にできれば見てほしい動画に対して記述します。無音でも良いのですが、訪問者の感情に訴えかけたいので、多少BGMがあった方が良いです。また、訪問者ファーストな動画の見せ方でもあります。見たいところだけ、見るという選択肢もあり、無音にすることもできます。
後半の記述の「controls」を記述するだけです。わかりやすいですね＾＾読んで字のごとく「ビデオをコント−ル」する。
２つ目に「videoタグのレスポンシブル対応。」
これはいろんな情報があって、最終的に「動画の表示領域の高さ・幅は絶対的な値に限ります。パーセント値は不可。」ということ。つまり「PX指定」でPC,タブレット、スマホ用にメデイアクエリで動画の大きさを調整する必要があります。
パーセント指定不可なのに「コピペでレスポンシブル対応できる！％指定して・・・（中略）」的な情報もあって、いろいろ試してみました。が私はそのような高度な記述は理解できないので、地道に「メディアクエリ」でレスポンス対応しました。
裏技的なものを使わなくても、ノーマルな方法こそ王道。これで対応できました。参考までに私のポートフォリオです。https://zero.getaslowlife.xyz/
右クリック →「検証モード」で、幅を縮めたりして、確認してみてください。ブレイクポイントは「９６０，７６８、４８０ｐｘ」で動画の幅を調整してます。上手く動画画面の大きさが変わると思います。
３．videoタグのサムネイル設定。
最後です。サムネイルの設定は「poster="○○○○"」を追記するだけ。なのですが、htmlリファレンスとか、他の記事をみると、大体、下の画像のように記述してあります。
赤線のファイル（サムネ画像）を用意する。リファレンスによると「poster="○○○○"」に直書き！？これが全然、上手くいかない。私に落ち度があるのか・・・画像ファイル（サムネ）をわざわざ動画フォルダに入れるべきだったのかな？・・・それもなんか違和感。・・・結果・・・意味不明。
なので「ノーマルこそ王道」の考えに戻り、普通のファイルの呼び出し方で記述したら、上手くいきました。＾＾
「poster="/image/thumbnail.png"」と普通にノーマルに記述したら、普通に表示されました。やはり、裏技ではなく、普通が一番です。はい＾＾；
まとめ
videoタグの埋め込み・レスポンシブル・サムネイル設定上手くいきましたか？私も含めて初心者の方はあまり、裏技とか時短技にとらわれない方が、実は「時短」だったりするのかもしれません。普通にやるのが一番早いですねぇ＾＾
videoタグの
１．埋め込みは「imgタグ」のイメージで記述！
２．レスポンスはｐｘ指定しかできない。地道にメディアクエリ活用！
３．サムネイルは普通に「/image/〇〇.png」のように普通に呼び出す！
なかなか普通のことしか書いてない記事でしたが＾＾；本日は改めて思ったのが「基本を大切に実直に継続」するという地味な検証結果に終わりました（汗）最後まで読んでいただきありがとうございます。それではまた・・・。
