HOME > > > YouTubeの映像をjqueryを使わずに背景全面に設置する方法

YouTubeの映像をjqueryを使わずに背景全面に設置する方法

Youtubeを背景にする

YouTubeの映像を背景に設置する

トップページを開いた時に背景全面が映像になっているサイトってかっこいいですよね。某有名スポーツグッズサイトや海外の制作会社のサイトでもよく見る様になりました。
最初の頃は映像が重たくてもういいやぁ~とサイトを落ちていましたが、最近では結構軽いサイトが多いです。増えた要因も使いやすくなったそこにあるのかもしれませんね。

サンプルはこちら ※音が出ます

HTMLにコードを追加します

下記のコードをbody内に追加してください。
<body>の直下か</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/youtubeの映像ID?rel=0&autoplay=1&loop=1&controls=0&wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>

YouTubeの映像IDをコピーする

背景にしたい映像のページを開きます。
URLが「https://www.youtube.com/watch?v=wsj2ggdm5Xg」だとすると「wsj2ggdm5Xg」がIDになりますので、この部分をコピーして、先ほど設置したiframeの「youtubeの映像ID」部分に上書きしてください。


以上で設置完了です。

注意したい点をまとめました

背景に映像を設置するのは難しくないのですが、記事を書いていて注意すべきと思った点をまとめました。

使う映像について

YouTubeの映像を使う時は、なんでも勝手に掲載していいものではありません。
自分で用意した映像を使いましょう。
もしくは掲載フリーの映像や、どうしても使いたい映像があった場合は主の方に許可を取りましょう。
またアップ主さんが許可しても、著作権が発生するアニメや映画、アーティストのPVなどの映像の掲載は止めたほうが良いですね。そこはアップ主さんの許可ではなく制作もしくは所有権を持っている方の許可が必要だからです。

音について

トップページからいきなり音が出てきたらビックリします。
私は強制的に音が出るサイトが好きではなく、音量も調整できないサイトは即離脱します。
「強制」はあまりユーザビリティが良いとは言えませんので、背景に設置する映像は無音の方が良いかもしれません。
※と言いつつサンプルは音が鳴ってます。ごめんなさい。

映像の長さ

映像が長いとその分サイトが重たくなると思いますので、数秒~数十秒程度の映像をloop再生させるのが快適にサイトを見てもらえるコツかもしれません。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.04.19