タグ

YouTubeに関するWebDesignScrachのブックマーク (9)

  • これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌

    CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで、どんな環境でも動画をページにフィットさせたい用途に有用です。 通常サイズ。ブロックいっぱいに広がる動画 幅をiPhoneなみに小さくしてみた例。動画も縮んでます。 IEでも動くみたいです。 これは覚えておいたほうがよさそうです。 関連エントリ フリーで新しめのXHTML/CSSで書かれたサイトテンプレート45 ぜんぶピュアCSSでやっちゃおうというJavaScriptの代替デモ56 Ajaxスタ

  • Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」:phpspot開発日誌

    Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 2011年04月05日- Custom YouTube Player Reload ? Scripts and Code Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 Youtubeの通常のembedタグを埋めこむと、再生ボタンやらなにやらが付いていたりしますが、次のように、再生ボタンなしに出来ます。 これだけでも、デザインされたサイトには馴染みそうですね。バーがあるとデザイン全体が台なしというケースもありそう。 更に、カーソルを合わせると次のようにカスタマイズされたコントロールバーが現れます。 このコントロールバーは、JavaScript + CSS + 画像でデザインされており、

  • YoutubeのAPIとjQueryを使って動画をインクリメンタルサーチする

    便利に感じたのでメモ。Youtubeの 動画を検索キーワードを入れただけ で瞬時に結果を表示させる、という、 インクリメンタルサーチをjQueryで 実装するというもの。検索には YoutubeAPIを使用します。 Youtubeの動画検索をWordPressの管理画面内で出来るプラグインを自作して使っていたんですがどうにも使いにくかったところ、jQTubeUtilなるプラグインでサクっとインクリメンタルサーチが可能のようでこれを採用しました。 jQTubeUtil インクリメンタル検索を可能にするjQueryプラグインです。インクリメンタルサーチと言ってもあまり聞きなれないかも知れないのでデモ触ったほうが早いですかね・・ 以下にデモを用意しました。サジェストとして検索結果が即時表示されます。 サンプル +Mobily PlaygroundデモはMobily Playgroundのサンプル

    YoutubeのAPIとjQueryを使って動画をインクリメンタルサーチする
  • Youtube動画をクール且つシンプルなプレーヤーで実装するjQuery - かちびと.net

    Youtubeのインターフェースが 気に入らない、という方向け ですね。Youtube動画をクール でシンプルなプレーヤーで 実装出来るjQueryのご紹介 です。 ブラウザはIE6、IE7やSafariでも実装出来ますが、Operaだけ実装出来ませんでした。IE6はやや難ありです。 Custom YouTube Video Player 再生ボタンのみのシンプルなインターフェース。再生ボタンは画像を変えれば変更できますよ。 再生中にマウスオーバーしても上記のように停止ボタンとタイムバーのみのシンプルなプレーヤーです。 再生が終っても関連動画は出ずにリプレイボタンが出るだけです。 IE6のキャプチャです。実装は出来るのですが、再生中にマウスを乗せても停止ボタンが出てくれません。停止できる事は出来るんですが・・ APIを使っていて、Youtubeの動画URLを上記ボックスに入力すると下に動画

  • 「オザワにんきもの」 -Ver.9- 最終版?

    小沢一郎氏は比例復活…17回連続当選の選挙区で初の敗北 衆院選2021 https://bit.ly/3GHiTl1 東日大震災で国民見捨て放射能怖さに逃げた小沢一郎元代表!小沢一郎夫人が支援者に「離婚しました」 「愛人」「隠し子」も綴られた便箋11枚の衝撃 http://j.mp/ODa7lZ  小沢一郎 政治資金問題 最新ヘッドライン(共同通信社) http://www.kyodonews.jp/feature/rikuzankai/ 「組織対策費」解明棚上げ 36億円使途不明 (October 25, 2010/毎日) http://mainichi.jp/select/seiji/news/20101026k0000m010081000c.html 小沢氏と政策秘書に不倫スキャンダル 青木愛氏と密会疑惑 (September 8, 2010/週刊文春・週刊新潮-産経) http:

    「オザワにんきもの」 -Ver.9- 最終版?
  • YouTube SEOのまとめ

    Search Engine LandでYouTubeのビデオのランキングに関係するだろうと考えられる要因をまとめた記事が公開されました。 僕はYouTubeにチャンネルを作ってビデオをアップし始めたところだったのでちょうどいいタイミングでした。 ブログ読者のみなさんとシェアしたいと思います。 まず基となるのが3つの動画情報です。 タイトル 説明 タグ 「タイトル」はビデオページのtitleタグとしても利用されます。 キーワードを含めることが必須ですし、CTRを高めるようなコピーにしたいですね。 「説明」は手抜きせずに十分な量のテキストを書くべきです。 ソースを見れば分かるように、ビデオページは検索エンジンが好むテキストがかなり少ないです。 そのページ(ビデオ)のテーマが分かるように、関係するキーワードを盛り込んだ記述にします。 Googleは、動画内の音声をインデックス化するGAudiと

    YouTube SEOのまとめ
  • とあるイベントにおけるTwitter中継事例:Geekなぺーじ

    昨日、某イベント(参考:全日剣道連盟Twitterを開始)の中継スタッフ(i.e.お手伝い係)として撮影係をしていました。 中継はTwitterを中心とした形で行ったのですが、Web、ブログ、Twitter、YouTube、twitpicを横断した複合的な中継という形になりました。 全日剣道連盟の広報職員以外で、今回オンライン情報配信のために活動をしていたのは5人でした。 私は、そのうちのハイスピードカメラ動画(スローモーション)撮影及び、撮影した映像編集係でした。 会場で「全剣連」と書かれた腕章をしながら報道関係者の方々の横でひたすら動画撮影を行っていました。 Twitter部隊の様子 昨日、その時の様子を写真で撮影してTweetされていました。 twitpic係の方が撮影をしていたので映っているのは4人です。 http://twitpic.com/o37ir - 5人体制でTwit

  • sabotem × web | いろいろ

    マウス:MX ERGO M570からトラックボール派。 M570系のクリックボタンが何度も壊れたので、上位モデルを長く使う作戦に キーボード1:REALFORCE TKL A 職場で古いHHKBを割り当てられてから、 無接点静電容量方式派 キーボード2:ThinkPad TrackPoint Keyboard 疲れてきたら太ももの上にこれ置いて作業してる

  • 10 SEO tips for YouTube

    コムスコアによると、グーグルに次ぐ検索エンジンはヤフーやマイクロソフトでなく、ユーチューブだという。ユーチューブのビデオは、ユーチューブの検索エンジンからだけでなく、外部の検索エンジンからも検索される。ユーチューブを最適化する10箇条は次の通り。 ------------------------------ 1. プロフィールなどに、ブランド体験を増幅させる外部サイトへのリンクを用意しよう。 2. ビデオのタイトルには適切なキーワードを含めよう。できれば「ビデオ」(動画・映像)という言葉を含めよう。 3. ビデオの説明には適切なキーワードを含めよう。「詳細」が開かれないかもしれないのでURLを冒頭に。 4. 検索エンジンにビデオの内容を正確に理解させたかったら、ビデオ内のコピーを説明に書いておこう。 5. ビデオにキャプションやアノテーションを被せる機能を利用して、行動を喚起しよう。 6.

    10 SEO tips for YouTube
  • 1