• JOIN US ON SNS
  • 株式会社monomode
    私たちは札幌・東京を拠点に活動するWEB制作、ホームページ制作会社です。WEB制作やネットショップ制作など、ウェブデザインの提案を主に、ポスターやパンフレットなど印刷物の制作も行っています。

Youtube動画をWEBサイトに埋め込んで背景いっぱいに表示させる方法[jQuery tubular]

Youtube動画をWEBサイトに埋め込んで背景いっぱいに表示させる方法[jQuery tubular]

前回フルスクリーンで表示される背景動画のオシャレなWEBサイトをまとめました。

ジャンル別で見る映像を上手く取り入れたオシャレなWEBデザイン

こんなにオシャレなサイトを見ていたら、とりあえずWEBサイトに動画を埋め込んでみたい衝動に駆られることでしょう。そこで今回は皆大好きYoutubeの動画をWEBサイトに埋め込む方法をご紹介します。

 

デモはこちらから

 

HTMLとCSSはこんな感じ

先にソースを公開します。折角なら大きくフルスクリーンで動画を再生し、ど真ん中にテキストを表示させましょう。

HTML

CSS

2〜6行目で、htmlとbody要素を画面いっぱいにします。#wrapperは中央に配置させたいので、topとleftそれぞれ50%にしたあと要素分のネガティブマージンを当てています。

 

Youtubeの動画を埋め込もう

tubular

tubluar

http://www.seanmccambridge.com/tubular/

Youtube動画を埋め込みたいならjQueryプラグインのtubularはいかがでしょうか。このプラグイン、とても簡単なので導入には持って来いです。今回はtubularを使用した紹介をしますが、勿論他のプラグインでも構いません!

まず、tubularのサイトにアクセスして、右上のDownloadからGoogle Codeページへ飛びましょう。そして、左側のDownloadsから最新版のtubularをダウンロードします。解凍したらjsフォルダへ格納。

 

使い方

1、2行目でjQueryライブラリとtubular.jsを読み込みます。

そして、6行目に動画を表示させたい要素(headerや#wrapperなど)を記述します。今回はbody要素に当てました。

7行目で埋め込みたいYoutube動画のIDを記述します。「https://www.youtube.com/watch?v=xxxxxxx」の「xxxxxxx」の部分です。

なんと設定はこれだけです。これだけでYoutubeの動画を埋め込むことが出来るんです。今回はmodeのサンプル動画を読み込みました!

 

あれ、でも動かないけど…?

このtubularというプラグイン、サーバーにアップしないと動きません!tubularに限らず、Youtubeなどの動画を読み込む系のプラグインはサーバーにアップしないと動作しないので、表示されないと慌てずテスト環境にアップしましょう。

そしてテスト環境にアップしたのがこちらになります!

デモはこちらから

 

色々なオプション

tubularはデフォルトで音声なし、繰り返し再生が設定されているため、導入するだけで背景動画として利用することができます。便利ですね。他にはどんなオプションが使えるか見てみましょう。

 

限定公開の動画でも読み込める

なんとこのプラグイン、Youtubeの限定公開の動画も読み込めるのです。背景として編集した動画は、動画単体として見ると味気なかったり何のことか分からなかったりします。なのでYoutubeから検索されたくない場合はYoutube動画の設定で限定公開にしておくと良いですよ。

 

いかがでしたか?次回はHTML5を使った映像の埋め込み方をご紹介します!

 

こちらもおすすめです!

ジャンル別で見る映像を上手く取り入れたオシャレなWEBデザイン

この記事が気に入ったら
いいね ! しよう

Twitter で
The following two tabs change content below.
マスコ カズヒト

マスコ カズヒト

monomodeのファンタスティック・プラネット増子です。 音楽好きが高じてバンドやってて愛器はグレコ335。マメルリハインコと一緒に暮らしてます。

関連記事

  • RSS rss
  • feedly FEEDLY Feedlyで追加する
mautic is open source marketing automation
ページトップへ戻る