最近、ホームページで動画の埋め込みを、よくするようになりました。
自分のサーバーに動画を置いて、videoタグで設置するもよし。
Youtubeの埋め込みタグを使うもよし。
Canvasを使って、独自にアニメーションを作るもよし。
CSSを使って、animation処理をするもよし。
いろいろな方法で動くホームページを作ることが手軽にできるようになってきました。
これらを駆使して、お手軽にゲームを作ることもアイデア次第でできちゃいますね。
先日、とあるホームページにYoutube動画を埋め込んだ時に、リキッドスタイル系のサイトだったため、
動画のサイズが固定にできず、サイズ設定に困っていた時に、cssのaspect-ratioという機能があるのを知ったので、使ってみたところ、かなりいい感じになったので、
今後は、動画の埋め込みにはこの機能を使うことを心に決めた出来事でした。
aspect-ratio
cssのプロパティにあたる「aspect-ratio」という機能を少し深堀りしておきましょう。aspect-ratio は CSS のプロパティで、ボックスの推奨アスペクト比を設定します。これは auto の大きさを計算したり、他のレイアウト関数で使用されたりします。 参考ページ : https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio
記述
aspect-ratio : 横サイズ / 縦サイズ;
動画などは、昔からテレビのアスペクト比を基準に、4:3や16:9が使われているので、比率記入をしてもいいし、実際のサイズを1200 : 900のように記述してもいいです。
ブラウザサイズに依存した正方形サンプル
どうやらこの機能は、動画じゃなくて、タグのサイズに対して使える機能なので、簡単に画面サイズに依存した正方形が作れますね。sample
.square{
display:flex;
background-color:black;
color:white;
align-items:center;
justify-content:center;
width : calc(100vw / 4);
aspect-ratio: 1/1;
}
Youtube動画利用サンプル
Youtubeの埋め込みタグをコピペするとこんな感じ。 ※動画は、ユゲタが適当に収録した、Blenderのテクスチャをスライドさせる検証をしているヤツです。（今回中身は関係ありません）<iframe width="560" height="315" src="https://www.youtube.com/embed/Z_GwfWIBEfg?si=ffOAsJfZb2mZn3am" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
サイズが560pxで固定されて、レスポンシブや画面サイズ、親タグサイズなどに依存させたい場合は、次のようにします。
<iframe width="560" height="315" ※消す class="youtube" src="https://www.youtube.com/embed/Z_GwfWIBEfg?si=ffOAsJfZb2mZn3am" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe><style>
.youtube{
width:100%;
aspect-ratio:16 / 9;
}
</style>
0 件のコメント:
コメントを投稿