FC2ブログの個別記事背景にYouTube動画を簡単表示する方法

投稿 2018年03月01日
0
jQueryプラグイン
FC2ブログ背景YouTube動画jquery.mb.YTPlayer

弊ブログをPCから閲覧の場合マイクロソフトのIEでは正しく表示しておりません! 閲覧ブラウザは Chrome や Firefox をお勧め致します。

3月になり、今までの寒さがウソだったように一気に春がやって来たような当地のポカポカ陽気ですから、今日は浮かれて目先の変わった記事を書きますね(笑)

数年前に弊ブログで ↓【 FC2ブログの個別記事背景にYouTube動画を表示する記事 】 を書いておりました。

FC2ブログの背景にYouTube動画を設定する - jQueryプラグイン

昨今、ブログの背景にYouTube動画を設定する人が増えて来ております。今まではブログの背景には小さい背景用画像(ファイル容量の小さく軽い画像素材)を繰り返し敷き詰めて、ブログ全体の背景画像として表示するブロックパターンな...

当時の方法はjQueryプラグインの 「jquery.mb.YTPlayer」の各種必要ファイルを自分のブログスペースにアップロードして諸設定して、記事背景全面に迫力のあるYouTube動画を表示する方法でした。

ところが、ブログのSSL化以降からYouTube動画が背景に表示されなくなってしまったんでした (^_^; アハハ…
そう、ご多分に漏れずjQueryプラグインの一部のファイルの中身自体に非SSLの http:// スキームが書かれていて意図的改変が出来ず、それが混在コンテンツとなって表示出来なくなってしまったんです(爆)

それで 『 何かもっと他の方法ってないの? 』 と追求を始めましたら、なんとあっさりと見つかりました(笑)

今回は 弊記事にも既にYouTube動画を背景に表示してありますが、まさにこれのことです ^^ こんなWebテクが全くの初心者さんでもブログ記事背景にYouTube動画を壁紙のように表示してしまう簡単設置方法をご案内します。

ほんとに超簡単な方法でして、あなたの記事欄に後ほど指定するHTMLソースをペチョっとコピペするだけで実現出来てしまうんですから(笑)

今回はサンプルとしてYouTube動画よりこのフリー動画素材を背景に使わせて戴いております。

FC2ブログの個別記事背景全画面にYouTube動画を表示するには

ほんとに簡単な方法で実現出来ることなんですが、ただこれにはコツとビジュアルセンスが必要なのと、スマートフォンには表示出来ないことをご承知下さい。

  • ゴチャゴチャした動画画面だとブログ画面が観にくくなる
  • 動画画面全体が均一的色合いの方が目に優しい
  • ブログのテンプレート構造によっては動画表示出来ない場合がある
  • ドローン空撮のような、動画画面全体が激しく移動するようなものだと閲覧者によっては目眩を起こす可能性があるので注意が必要
  • その他いろいろ
■ ご注意下さい!
この方法で記事背景に設定するYouTube動画は、あくまでも著作権侵害にならないフリー素材のものや、自身が著作権者であるもので設定して下さい。

こんなことを踏まえて解説しますね。

HTMLソースをあなたの記事にコピペする

あなたが書いたブログ記事の下に下記のHTMLソースをコピペして下さい。 それだけです(爆)

枠内をクリックすると全選択されますからそれをコピーすると簡単です
<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=MEicY-h1hJc',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:0.4}">background movie</a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.0.9/jquery.mb.YTPlayer.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.0.9/css/jquery.mb.YTPlayer.min.css" />
<script>
  $(function(){
      $(".player").mb_YTPlayer();
    });
</script>

ねっ 簡単でしょ(笑)

YouTube動画が表示されなかった場合の対応

これで記事背景にYouTube動画が表示されない場合には、あなたのブログのテンプレートにjQuery本体のソースコードが読み込まれていないことが考えられますので、その対応をする必要がありますがそれも簡単です。

枠内をクリックすると全選択されますからそれをコピーすると簡単です
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

この一行のHTMLコードを、先ほどの2行目の空欄にコピペ挿入して下さい。

<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=MEicY-h1hJc',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:0.4}">background movie</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.0.9/jquery.mb.YTPlayer.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.0.9/css/jquery.mb.YTPlayer.min.css" />
<script>
  $(function(){
      $(".player").mb_YTPlayer();
    });
</script>

このように赤文字部分がその挿入例ですが、もし、もともとあなたのブログのテンプレートにjQuery本体の呼び込みコードが書かれているのに、それを見落としてこのように追加してしまうと、今まであなたのブログで動作していたjQueryに関わるプラグインが干渉してしまって動作出来なくなる場合がありますから、テンプレートのHTMLソース内をよく確認する必要があります。

利用するYouTube動画の変更方法

上記HTMLソースをあなたのブログ記事に貼り付けると、くらげ動画(笑)がそのまま表示されてしまいますから、あなたの利用したいものに変更する必要がありますが、既にHTMLソースを見て気がついておられると思います。

HTMLソースの一行目の中にある

https://www.youtube.com/watch?v=MEicY-h1hJc

このYouTube動画のURLをあなたの利用したい動画のURLと差し替えて下さい。

但し、URL前後を挟んでおります「'」この記号(シングルクォーテーション)を消去してしまわないように注意して下さい。

背景の透過濃度の調整方法

ブログテンプレートのデザインや利用するYouTube動画の全体的色合いによっては、その表示濃度の調整が必要になったりしますから、下書き記事欄でプレビューを見つつ調整して下さい。

HTMLソースの一行目の後尾にある opacity:0.4 の数値を変更するのですが、ここが 1 だと背景が完全透明になって、YouTube動画そのままの濃度で表示されることになります。

YouTube動画に音がある場合のコントロール

利用したYouTube動画が背景として表示された時には初期設定では音はミュートされておりますが、閲覧者さんが任意で音量調整することができ、その方法は画面最下部にマウスホバーするとYouTube動画のコントロールパネルが表示され、下図のようにコントロールすることが出来ます。

記事欄に直接YouTube動画を表示させるHTMLソースを書き込む理由

本来でしたら、YouTube動画を記事背景に全画面表示させる為に、これに関わるjQueryのHTMLソースはブログテンプレートの </body> の直上に埋め込んだりするのがセオリーなんですが、今回記事内に直接書くようにした理由は、あまり使う場面がないのにテンプレート内に書いてしまうと、常時ブログ表示にその為の負荷を掛けてしまうのでそれを避ける為の「記事内設定」と言うことにしました。

以上でブログの個別記事背景にYouTube動画を全画面表示することが出来るんですが、これはブロガーさん個々の利用環境により表示が非常に左右されますので「 ああしたいんだけど! こうしたいんだけど!」というような個別要望的質問は対応が難しいのでご遠慮願います ^^

■ 追記 2018/03/22
FC2ブログテンプレート(Axis)を最新版(Latest update: 2018.3.21)にアップデートしましたところ、弊記事背景に設定してありましたYouTube動画が表示されなくなってしまいました。
只今その原因を追及中ですが、とりあえず最新版テンプレートに関わらないHTMLページを作成して動画背景サンプルを設置してありますので、下記リンクからご参照下さい。

[ 弊ブログでのYouTube動画背景サンプル ]

( 動画背景はちょっと遅れて表示されますからご承知下さい )


検索からの方は
トップページへもどうぞ
background movie
[ 関連記事 ]
もっと見る
ぼっちん
ぼっちん

0 COMMENTS

There are no comments yet.

LEAVE A REPLY