CSSだけで背景をフルスクリーンYouTubeにする

CSSだけで背景をフルスクリーンYouTubeにする

背景にYouTubeを設置するとインパクトあるサイトが簡単に作成できます。 YouTube動画は自動再生になってますのでサイトが表示したら動画が自動で再生されます。又記事をスクロールしても動画は移動されないので常に動画が背景になります。

背景にYouTubeを設置する方法

背景にYouTubeを設置する方法はgoogleなどで検索するとjQueryプラグインなどを使った方法とか色々あるみたいですが、ここではjQueryプラグインは使わずに 単純にスタイルシートだけで設置する方法を紹介します。

まずはYouTubeに行き設置したい動画を探します。
設置したい動画のアドレスの所に動画のIDがあるのでそれをコピーしてメモ帳などに貼り付けて置いてください。

YouTube

下記のコードをコピーしてbodyタグのすぐ下に貼り付けてください。

<iframe style="z-index: -1;min-width: 1024px;position: fixed;top:0;left:0;" width="100%" height="100%" src="http://www.youtube.com/embed/lYvPsR5QVNk?rel=0&autoplay=1&loop=1&controls=0&wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>

上記コードの動画ID「lYvPsR5QVNk」の所を表示させたい動画IDに書き換えてください。

これで背景にYouTube動画が表示されます。

又コードの中のtop:0;left:0;はサイトによっては調整が必要な場合もあるかもしれません。

CSSだけで背景をフルスクリーンYouTubeにするのサンプル

CSSだけで背景をフルスクリーンYouTubeにする

背景にYouTubeを設置した時の欠点

簡単にインパクトのあるサイトが作成できますが、欠点もあります。

  • パソコンの環境によってはパソコンに負担が掛かると思います。
  • インターネットの通信速度が遅い環境だとサイトがうまく表示されないと思います。
  • 古いバージョンのブラウザでは上手く表示しないかも知れません。
  • 人によっては動画が邪魔に思える人もいるかもしれません。
  • 音が消せないためサイトを見るのにうるさく感じる人もいるかもしれません。
  • IEだとループ再生などのパラメーターが使えないみたいです。又広告が入っている動画でもループ再生しないみたいです。 色んなサイトで試していないため不具合があるかも知れません。

背景にYouTubeを設置する方は以上のような事をご理解いただき設置してください。

アメブロの背景にYouTubeを設置してみる

アメブロの背景でもYouTubeは設置できます。詳しくは「アメブロの背景にYouTubeを設置してみる」に書いてあるのでそちらをご覧ください。

最終更新日: 2013年3月11日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

CSSだけで背景をフルスクリーンYouTubeにするの関連記事

CSSだけで背景をフルスクリーンYouTubeにする” への4件のコメント

  1. あなたは天才ですか?すごいですね。すばらしい。
    初心者ですがこれを1週間すっと探してやっとたどり着きました。
    ありがとうございました。

    • コメントありがとうございます!
      お役に立てて良かったです。

  2. 僕も1〜2週間ずっと方法探してて、挫折してプロに頼むしかないかな〜って思ってたところ
    偶然このページを見つけてやっってみたら、今までが嘘みたいにあっさり出来ちゃいました!
    http://www.orangecave.com
    本当にありがとうございました!!!

    ちなみに
    スマホ&タブレットではやっぱり厳しいんですよね?

    • コメントありがとうございます。

      サイトを確認させていただきました。とてもオシャレな感じですね。

      スマホ&タブレットで表示させるにはCSSのコードを変更すれば可能だとは思いますが、例えばスマホ&タブレットを横にした時は全面に表示されるような感じになっても縦にした時は通常のYouTubeが表示されているような感じ(縦長に動画はならない為)になってしまいサイトが見づらくなると思います。
      なおスマホ&タブレットはPCの速度と比べると遅いのでYouTubeを背景に使った方法はあまりオススメ出来ません。

      又何かあったらお気軽にお問い合わせ下さい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*