サイト用の背景動画（HTML5）

サイト用の背景動画（HTML5）: 用途

サイト上部の背景で短い動画が流れると、雰囲気や商品、サービスがひと目で伝わります。スマートフォンで動かすには、動画に音がなく、muted、autoplay、playsinline の属性があることが必要です。

ジェネレーターは、MP4とWebMのvideoタグ、カバー画像、文字が読みやすいよう調整できる暗いレイヤー、タイトルとテキスト、そしてWCAGが5秒以上動くコンテンツに求める一時停止ボタンを備えたセクションを作ります。動きを減らしたい人には、動画は最初から一時停止の状態になります。

使い方

1. 動画とカバー画像のアドレスを入力します。
2. タイトルとテキストを書き、暗いレイヤーを調整します。
3. コードをコピーして、ページの上部に貼り付けます。

使うタイミング

• レストランやホテルのサイト上部。
• イベントのランディングページ。
• 不動産会社やジムのページ。

よくある質問

スマートフォンで動画が自動再生されないのはなぜですか？

ブラウザが自動再生を許可するのは、音のない動画だけです。動画には muted、autoplay、そして iPhone では playsinline の属性が必要で、ないと全画面になるか再生されません。コードには3つとも含まれています。

ファイルサイズはどれくらいがいいですか？

背景動画は短く（ループで10〜20秒）、軽く、できれば3〜5 MB未満で、音声なしの720pか1080pにしましょう。公開前に圧縮してください。重い動画はスマートフォンでの読み込みを遅くします。

動きを減らしたい人にはどうなりますか？

システムで動きの軽減を有効にしている人には、スクリプトが動画を一時停止し、カバー画像だけが表示されます。一時停止ボタンもあり、WCAGが5秒以上動くコンテンツに求めています。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール