[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル
動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモページ：下までスクロール 実装 使用するリソース チュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグイン フォント：Google Fonts (Raleway, Lato) アイコン：Font Awesome 背景に使う動画の注意点 背景に使う動画は、下記の点に注意してください。 動
![[JS]YouTubeの動画をページ全体の背景に配置し、レスポンシブ対応の今時のテクニックを使ったチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b3413c8d26665727debe1c206713a14699cabe5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015020310-01.png)
jQueryではじめるAjax：第3回 Youtube APIとjQueryを使いこなす｜gihyo.jp … 技術評論社
たとえば、検索結果を表示する簡単なアプリケーションのために、整形されたHTMLを含むデータを取得するには次のように指定します。 http://gdata.youtube.com/feeds/base/videos フィードの種類 データを取得するフィードは数種類あります。 通常はVideoフィードを使えば十分ですが、投稿者の情報やコメントの情報等を取得するフィードもありますので、必要に応じて使い分けてください。 全てのフィードは読み取り専用であり、認証無しでリクエストすることができます。 また、新しく投稿されたビデオがフィードで取得できるようになるには、インデックス化のため数時間かかります。 Videoフィード Videoフィードには、ビデオ、関連動画、standard、お気に入り、再生リスト、コメントのフィードがあります。 ビデオフィード ビデオを検索するには、ビデオフィードを使います。
第1回 まずは実装してみよう | gihyo.jp
はじめに この連載では、Javascriptは知っているけどAjaxは実装したことがないという方に向け、YouTube APIを利用したWebアプリケーションを題材に、実装の方法を解説します。 JavascriptのライブラリはjQueryを使用します。jQueryによるAjax実装、基本的な使い方、また、UIへの応用実装も合わせて解説します。 Ajaxってなに？ Ajaxとは、Asynchronous Javascript+XMLの略称です。Javascriptを使い、Webページとは非同期（Asynchronous）にXML形式（もしくはテキスト形式）のデータ通信を行う手法を指します。 Ajaxを使うと特別なプラグインなどを必要とせず、Webページの必要な部分だけ必要に応じて書き換えることができるため、ユーザビリティの高いWebアプリケーションを作ることができます。また、異なるWebサ
特集：jQueryではじめるAjax｜gihyo.jp … 技術評論社
運営元のロゴ Copyright © 2007-2024 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。
tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design
jQuery tubular Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you're on your way. $(page content wrapper element).tubular(options); Tubular's hello, world Assuming you're happy with the default options and you use a wrapper div with the id of wrapper, you simply attach to your wrapper div and
Youtubeの動画を背景に
jQueryのtubularプラグインを使用してYOUTUBEの動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載01】 最近Webサイトでブラウザの背景全体に動画を配置してインパクトのあるサイトを見ることがありましたので、2回に分けて、YOUTUBEにアップロードした動画や自分のサーバー上の動画をvideo要素を使用して配置するサンプルを作成しました。 まず初回はYOUTUBEの動画を背景に表示させるjQueryの「tubular」プラグインを使用してインパクトのあるページが作れるサンプルです。 このプラグインでよく見かけるのはただ動画を背景に配置しただけのサンプルが多いので、今回はサイトのデザインとして使えるように、ロゴやナビゲーションやコンテンツ内容を入れてWebサイトのTOPページのデザインのようなサンプルを作成してみましたので、背景に動画を流したい場合にお
Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」:phpspot開発日誌
PrettyEmbed.js Demo - CodePen Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」。 通常埋め込むと動画コントローラーやラベルが表示されて便利なんですが、どうしてもYoutube埋め込んだ感が凄くなりますね。 そこで、PrettyEmbedを使えば次のように。せっかくデザインしたサイトもYoutube埋め込みでかっこわるくならないようにできますね 関連エントリ Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」 流行りのYoutube風ローディングバー実装jQueryプラグイン YoutubeのChannel・Playlistの動画リストを表示できるjQueryプラグイン「PlumTube」
ゲームの基本的な動作やエフェクトなどのソースコードを検索可能な「Game Mechanic Explorer」
「ゲーム開発初心者のために何かできないか」と思っていたゲーム開発者のジョン・ワトソンさんが、ゲーム開発フレームワークの「Phaser」を使いJavaScriptでゲーム開発に役立ちそうな動きやアルゴリズム、エフェクトを作成し、ソースコード付きで「Game Mechanic Explorer」にて無料公開しています。歩行やジャンプといったゲームの基本的な動きから、追跡型ミサイルや光源による影など、さまざまな動作は、ソースコードが分からなくても操作するだけでも楽しい気分になれます。 Game Mechanic Explorer http://gamemechanicexplorer.com ゲームの基本的な動作やエフェクトを確認するには、上記URLを開いて、画面左側にある「Choose」の横にある下向き三角をクリックします。クリックすると「Walking and jumping」「Bullet
キーワードを入力するだけで作業用BGMをYouTubeからリストアップして流し続ける「FMTube!」
ネット環境とデバイスやPCさえあれば、YouTubeで音楽を聞くことができますが、仕事の前に作業用BGMを探したりするのは実は面倒なもの。そんな時に便利なのが、AngularJSの勉強をしていたらできたという、ブラウザで簡単に使える作業用BGMサービス「FMTube!」です。 FMTube! http://yusukebe.github.io/FMTube/ 「フォームにあなたの好きなアーティスト名を入れてPlayボタンを押すと 自動的にそのアーティストの曲一覧が現れ勝手にYouTube動画の再生がはじまります。 使い方はコ・レ・だ・け！」とのことなので、アーティスト名に「The Beatles」と入力し、「Play!」をクリックしてみると…… 数秒でビートルズのYouTube動画がリストアップされ、自動的に再生を開始しました。 リストの中から好きなムービーをクリックして再生することもでき
ScaleOut | Supership
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
映画「マトリックス」の上から文字が落ちてくるアレをわずか1KB以下のコードで再現
映画「マトリックス」の非常に有名な上から漢字やらカタカナやら平仮名やらが滝のようにぞろぞろ流れ落ちてくるあの超有名なシーンを1KB以下のコードで完全再現したものが「Matrix Canvas Code」です。 Matrix Canvas Code | CSSDeck http://cssdeck.com/labs/the-matrix 元となっているのはシーンは以下のような感じでマトリックス3部作の最初のイントロで上から滝のように流れ落ちてくるのが印象的なものとなっており、実際には縦書きの裏返った半角カナや注音符号なども出てきます。このような妙な文字が混じっている理由は、「日本のPCでは縦書きでプログラミングしている」と監督が誰かから吹き込まれたため。 Intro Matrix Reloaded - YouTube matrix intro - YouTube [HD] The Matri
これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート４５ ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ５６ Ajaxスタ
Googleのトップページを開くと毎秒100回JavaScriptが実行されるよ - 射撃しつつ前転 改
FirefoxがCPUを常に15%ぐらい食うのが気になっていたので調べてみたら、Googleのトップページを開くとものすごい勢いでJavaScriptが実行されることがわかった。具体的には、var k=t.value;k!=h&&X(0);h=k というコードが毎秒100回実行されている。このせいで、自分の使っているPCだと、Googleのトップページを開くだけでCPU使用率が2%ぐらい上がっているようだ。Firefox特有の問題というよりは、ウェブページ側の作り方に依るものみたいだ。たぶん他のブラウザでも問題は変わらないだろう。 Googleのトップページの場合、コードを調べてみた限りでは、原因はどうも検索候補の自動補完用のコードみたいだ。現在の入力文字列が過去の記録と違ったら補完の提示をやり直す、みたいなことをやっているように見える。 HTMLではテキストボックス内のテキストが変更され
vlog.it
Hi, this is Marco Rosella: welcome to vlog.it, a random rotating collection of my 300+ favourites videos collected in the last years. Instructions: Click on a moving slice, enjoy stuff. Follow the updates here: Thanks to Federico Orrù for the server side system and to all the videos' authors. This project has been named as finalist for the SXSW Interactive Awards 2012 in the Motion Graphics catego
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.youtube.com/playlist?list=PLTo9gQMPMgGaVv9e-ZsrzhWvu5BgyWpi-
[C!] Creazy! （クリエイジー！）![[C!] Creazy! （クリエイジー！）](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a8046f9e1ad6b933c90f35c5f5f4cf8bcb2000a/height=288;version=1;width=512/https%3A%2F%2Fcreazy.net%2Fwp%2Fwp-content%2Fuploads%2F2022%2F01%2F2022-01-28_wp_enqueue_style.jpg)
新しいテストライブラリのご提案 #tng10 @t_wada
動画をダウンロード＆保存する方法
Shibuya.js 24 Lightning Talks #2