動画をページいっぱいの背景として使用するのは、ここ数年人気の高いテクニック。 その方法はいくつかありますが、今回はレスポンシブ対応、動画の上にコンテンツを配置しスクロールでカーテンのように引き上げるページを実装するチュートリアルを紹介します。 HTML5のvideo要素で自サーバーの動画を配置するのではなく、YouTubeの動画を使うので、サーバーのレスポンスを気にする必要もありません。 デモページ:下までスクロール 実装 使用するリソース チュートリアルにあたり、下記のリソースを使用しています。 jQuery jquery.mb.YTPlayer YouTubeの動画を背景として表示するjQueryのプラグイン フォント:Google Fonts (Raleway, Lato) アイコン:Font Awesome 背景に使う動画の注意点 背景に使う動画は、下記の点に注意してください。 動
たとえば、検索結果を表示する簡単なアプリケーションのために、整形されたHTMLを含むデータを取得するには次のように指定します。 http://gdata.youtube.com/feeds/base/videos フィードの種類 データを取得するフィードは数種類あります。 通常はVideoフィードを使えば十分ですが、投稿者の情報やコメントの情報等を取得するフィードもありますので、必要に応じて使い分けてください。 全てのフィードは読み取り専用であり、認証無しでリクエストすることができます。 また、新しく投稿されたビデオがフィードで取得できるようになるには、インデックス化のため数時間かかります。 Videoフィード Videoフィードには、ビデオ、関連動画、standard、お気に入り、再生リスト、コメントのフィードがあります。 ビデオフィード ビデオを検索するには、ビデオフィードを使います。
はじめに この連載では、Javascriptは知っているけどAjaxは実装したことがないという方に向け、YouTube APIを利用したWebアプリケーションを題材に、実装の方法を解説します。 JavascriptのライブラリはjQueryを使用します。jQueryによるAjax実装、基本的な使い方、また、UIへの応用実装も合わせて解説します。 Ajaxってなに? Ajaxとは、Asynchronous Javascript+XMLの略称です。Javascriptを使い、Webページとは非同期(Asynchronous)にXML形式(もしくはテキスト形式)のデータ通信を行う手法を指します。 Ajaxを使うと特別なプラグインなどを必要とせず、Webページの必要な部分だけ必要に応じて書き換えることができるため、ユーザビリティの高いWebアプリケーションを作ることができます。また、異なるWebサ
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
PrettyEmbed.js Demo - CodePen Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」。 通常埋め込むと動画コントローラーやラベルが表示されて便利なんですが、どうしてもYoutube埋め込んだ感が凄くなりますね。 そこで、PrettyEmbedを使えば次のように。せっかくデザインしたサイトもYoutube埋め込みでかっこわるくならないようにできますね 関連エントリ Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」 流行りのYoutube風ローディングバー実装jQueryプラグイン YoutubeのChannel・Playlistの動画リストを表示できるjQueryプラグイン「PlumTube」
「ゲーム開発初心者のために何かできないか」と思っていたゲーム開発者のジョン・ワトソンさんが、ゲーム開発フレームワークの「Phaser」を使いJavaScriptでゲーム開発に役立ちそうな動きやアルゴリズム、エフェクトを作成し、ソースコード付きで「Game Mechanic Explorer」にて無料公開しています。歩行やジャンプといったゲームの基本的な動きから、追跡型ミサイルや光源による影など、さまざまな動作は、ソースコードが分からなくても操作するだけでも楽しい気分になれます。 Game Mechanic Explorer http://gamemechanicexplorer.com ゲームの基本的な動作やエフェクトを確認するには、上記URLを開いて、画面左側にある「Choose」の横にある下向き三角をクリックします。クリックすると「Walking and jumping」「Bullet
ネット環境とデバイスやPCさえあれば、YouTubeで音楽を聞くことができますが、仕事の前に作業用BGMを探したりするのは実は面倒なもの。そんな時に便利なのが、AngularJSの勉強をしていたらできたという、ブラウザで簡単に使える作業用BGMサービス「FMTube!」です。 FMTube! http://yusukebe.github.io/FMTube/ 「フォームにあなたの好きなアーティスト名を入れてPlayボタンを押すと 自動的にそのアーティストの曲一覧が現れ勝手にYouTube動画の再生がはじまります。 使い方はコ・レ・だ・け!」とのことなので、アーティスト名に「The Beatles」と入力し、「Play!」をクリックしてみると…… 数秒でビートルズのYouTube動画がリストアップされ、自動的に再生を開始しました。 リストの中から好きなムービーをクリックして再生することもでき
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
映画「マトリックス」の非常に有名な上から漢字やらカタカナやら平仮名やらが滝のようにぞろぞろ流れ落ちてくるあの超有名なシーンを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
CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート45 ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ56 Ajaxスタ
FirefoxがCPUを常に15%ぐらい食うのが気になっていたので調べてみたら、Googleのトップページを開くとものすごい勢いでJavaScriptが実行されることがわかった。具体的には、var k=t.value;k!=h&&X(0);h=k というコードが毎秒100回実行されている。このせいで、自分の使っているPCだと、Googleのトップページを開くだけでCPU使用率が2%ぐらい上がっているようだ。Firefox特有の問題というよりは、ウェブページ側の作り方に依るものみたいだ。たぶん他のブラウザでも問題は変わらないだろう。 Googleのトップページの場合、コードを調べてみた限りでは、原因はどうも検索候補の自動補完用のコードみたいだ。現在の入力文字列が過去の記録と違ったら補完の提示をやり直す、みたいなことをやっているように見える。 HTMLではテキストボックス内のテキストが変更され
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
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く