全画面の背景動画としてYouTubeの動画を使う方法をご紹介いたします。動画ファイルをサーバーに設置せず、YouTubeから読み込むので、レスポンスも良くなります。 以下に簡単なデモも用意しました。 デモページを見る ステップ1. HTMLのマークアップ HTMLは非常にシンプルです。記述する場所はどこでも構いません。 <div id="video-background"></div> <div id="video-overlay"></div> #video-backgroundの部分に動画を表示します。#video-overlayについては、クリックで動画が操作されないようにCSSでレイヤーを重ねるために記述しています。 ステップ2. CSSによる動画のサイズや位置の指定 CSSでは以下のように記述し、動画のサイズや位置を指定します。 #video-background, #video
こんにちは（・∀・） 要素の背景に動画を表示する方法をご紹介します。 前回ご紹介したvideo要素に続いて今回はYouTubeの埋め込みコードのiframe要素を使用したYouTube動画を背景に表示する方法です。 iframe要素を使用したYouTube動画を背景に表示 前回のvideo要素でも言いましたが、背景で使用する動画ファイルは、なるべく軽く作りましょう。できたら1MB以下にできると表示もスムーズになります。 また、動画が表示されない場合の代替え画像を用意することも忘れずに。 HTML <div class="sample-demo"> <p>【CSS】YouTubeの埋め込みコードのiframe要素を使うサンプル</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/4OcXH-BomSU
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
