動画背景とか、YouTubeなどの埋め込み動画とかの覚書

Bracketsが使いやすくって、コーディングが楽しくてしかたないやまだです(＝ﾟωﾟ)ﾉ

今、新サイトで背景に動画を使ったページを作っています。
いろいろと覚えたので、忘れないうちにメモ

videoタグで表示させる場合はこちらを参考に。
背景に動画を使ったWebサイトの作り方

Manaさんのサイトにはいつもお世話なっていますm(__)m

で、今回はYouTube動画を背景にします。
この場合はjQueryのプラグインを使って配置します。

息子の動画宣伝もかねて、こんなの作りましたよｗ（※音が鳴ります）
ストロベリーナイト(strawberry night) のオープニング曲を完全耳コピ！動画も面白い。
ドラム以外の全パート、実際に弾いてるんだと！すげー。

上の動画は、息子がまたいつ非公開になるかわからないので、自分のバンドの動画に変更w
30年ぶりの復活ライブのダイジェストです（※音が鳴ります）

~~作り方はこちらの本を参考にしました。~~

画像の荒れを目立たなくさせるために網模様とかストライプなんかを重ねるんだけど
網模様は好きじゃないので、画像ではなく背景色を黒の半透明にしたいので、そこだけ調整。

いらない場合は
_ovc.addClass('overlayPattern');　を削除すると消せます。
変更したい場合は、
CSSの「.overlayPattern」に画像を指定してあげると変わります。

あくまでも、背景動画で、本来は音付きの動画はおくべきではないのでこの使い方はあくまでも個人の楽しみとしてｗ
実務では音なし動画で、サウンドは別に置きON/OFFできるようにするのがいいかも。

ついでに「YouTubeなどの埋め込み動画のレスポンシブ対応にする」の修正

だいぶ前の記事「YouTubeなどの埋め込み動画のレスポンシブ対応にする」で作ったリンクが
クリックすると画面が移動をしてしまうのでaタグのhref=”#”を下記に書き換えました。
それと、横幅の指定が100%にしてしまうと、PCの場合とんでもなく大きくなってしまうのでそのサイズの指定をjs側で。

href="javascript:void(0)"

そして、ついでのついでｗ
ストロベリーナイトは音楽も映画も最高です（・∀・）!!そして原作も、最高におもしろいです。ただ描写が結構えげつないので、苦手な人は読まないほうがいいかも。「ジウ」なんてもう…

jQueryが古く情報自体も古いので、全然参考にならずですが、こんなやり方もあるという事で(＝ﾟωﾟ)ﾉ