menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/02/11
  • JQuery
  • YouTube

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

サイト全体の背景にYouTube動画を表示するプラグインはいくつかありますが、今回は特定の要素に背景として再生させる方法を紹介します。
ytplayer

使用方法

ダウンロード

jquery.mb.YTPlayer (github)

準備するファイル

・jquery.js


・jquery.mb.YTPlayer.min.js

外部ファイルの読み込み

JavaScript

HTML

今回は「class=”mov”」という要素の背景に表示させるように設定します。

Option

containment

YOUTUBEリンク

autoPlay : true / false

自動再生の有無

mute : true / false

音声の有無

startAt : 0 ~ 1

最初の透明度

opacity : 0 ~ 1

ロード後の透明度

loop : true / false

ループ再生の有無

showControls : true / false

再生・停止ボタンの表示非表示

printUrl : true / false

動画ページへのリンク

onReady:function(){console.log(‘START’)}

動画再生準備が完了した段階で何らかの操作を実装

オプションもいくつか用意されており、比較的簡単に設定できるのでオススメです。

コメント一覧

  1. kage より:

    質問させてください。
    手法を参考にヘッダー全体に動画をupしたところ、左右に黒い余白が出現し、動画の下段にマウスオンすると動画が下に伸びて、右下に「youtube」のロゴが出現してしまいます。これらは何が原因なのでしょうか。可能な範囲でご教示ください。よろしくお願いします。

    • brightonline より:

      ご質問ありがとうございます。
      ソースコードを見なければわからないので、
      htmlとcssのコードを書き込んでいただければ表示不具合の原因が特定できるかと思います。

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11