背景に動画を使ったWebサイトの作り方
2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で
『【カスタマイズ】動画をヘッダーの背景に設定する方法』
※2016年11月21日 更新 コードや本文を一部変更済み。以前のものだと動画上下に黒い背景が表示されてしまうため、新たにjQueryを使用したコードに変更しました。 詳細については、新たにご紹介した記事をご用意しましたので、ご参照ください。 YouTube動画をヘッダーの背景に設定する方法 ------- 先日Youtube動画をヘッダーの背景として利用したサンプルページを作成してみました。 その紹介記事を書いてみたところ、ちょこちょこ反響をいただきましたので、今回この記事にてYoutube動画をヘッダーの背景に設定する方法についてご紹介していきます。 動画をお持ちの方は、ぜひチャレンジしてみてください。 Youtube動画をヘッダーの背景に設定する方法 完成イメージは、以下のサンプルページのヘッダーです。 >> 動画ヘッダーサンプル ※2016/11/21更新 新たな動画ヘッダーを作成
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
