Category動画

YouTube埋め込み動画を簡単にレンスポンシブにしてくれる「SuperEmbed.js」

今やレスポンシブデザインにするのは当然の選択肢になりました。

YouTubeの動画をウェブサイトに埋め込むこともあると思いますが、動画もレスポンシブで表示させたいですよね。

YouTubeの埋め込み動画を簡単にレスポンシブにしてくれるのが、「SuperEmbed.js」です。

読み込ませておくだけで、動画の幅を画面やウィンドウの大きさに合わせてレスポンシブ化してくれます。

サンプルをご覧ください。

Youtube埋め込み動画を簡単にレンスポンシブにしてくれる「SuperEmbed.js」サンプル






対応している動画は、YouTube, Vimeo, Kickstarter, CollegeHumor, Hulu, Flickr, Vine, VideoPress, DailyMotion, Twitch.tv, Vid.meなど。

jQueryなしで単体で動作します。サイズも1.4 KBだけなのでサイトが重くなることもありません。

→「YouTube埋め込み動画を簡単にレンスポンシブにしてくれる「SuperEmbed.js」」の続きを読む

YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」

jQuery.mb.YTPlayer

メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多いと思います。

本編ムービーが公開されている公式サイトでは背景にテレビCMに使われた動画が流れるインパクトのあるサイトになっています。

参考:NEXT A-Class │ メルセデス・ベンツ日本公式サイト

このサイトを一部再現してみたいと思います。(注意:現在リニューアルされています。2016/10)

今回紹介するこのjQueryのコンポーネントを使用すると、ページの背景としてYouTubeムービーを設定することができます。

サンプルページを作ってみました

YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」サンプル


過去にも『背景にフルスクリーンで動画を流す「jquery-tubular」』で、背景にYouTube動画を流すことが出来るjQueryを紹介しました。今回の「jquery.mb.YTPlayer」は「jquery-tubular」と違ってHTMLのBODYで要素として設定しています。

背景動画を透過させることが出来たり、ループさせたりと細かな設定が可能です。

この「jquery.mb.YTPlayer」は、ページの背景に動画を流すだけではなく、好きなYouTube動画をサイトで紹介することが出来るクロムレスプレイヤーにもなりますが、今回はページの背景で動画を流す方法を説明したいと思います。

→「YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」」の続きを読む

画像、動画、Googleマップ… あらゆるメディアをLightBox(ライトボックス)風に表示させる「mediaboxAdvanced」


mediaboxAdvanced

お洒落なホームページにはよく別窓でかっこよく画像を表示するLightBoxが使われています。しかし普通のLightBoxだと画像に限られてしまいます。

ところがこの「mediaboxAdvanced」は、画像だけでなく動画やYouTubeなどの動画サイト・Twitter・facebookなどのソーシャルビデオ、Flashメディア・Google Map・HTMLなど、ほとんどのオンラインメディアに対応して、LightBox風に表示してくれます。

サンプルを用意しました。

→ あらゆるメディアをLightBox風に表示させるJavaScript「mediaboxAdvanced」サンプルページ


では、この「mediaboxAdvanced」の使い方は続きをどうぞ。

→「画像、動画、Googleマップ… あらゆるメディアをLightBox(ライトボックス)風に表示させる「mediaboxAdvanced」」の続きを読む

YouTubeの動画を背景にフルスクリーンで動画を流す「jquery-tubular」

サイトの背景で動画を流して、お洒落に演出するならこの「背景にフルスクリーンで動画を流すjquery-tubular」。

jQueryを使用して、YouTubeの動画をサイトの背景でフルスクリーンで流すことができます。

ということで、サンプル作ってみました。こんな感じになります

→ 背景にフルスクリーンで動画を流す「jquery-tubular」サンプルページ


使用方法は続きをご覧下さい。

→「YouTubeの動画を背景にフルスクリーンで動画を流す「jquery-tubular」」の続きを読む